refactor search && sorting reducers && actions using redux toolkit

client/constants.js

@@ -131,10 +131,7 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
 
-export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
-export const SET_SORTING = 'SET_SORTING';
 export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
-export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';

client/modules/IDE/actions/sorting.js

@@ -1,39 +1,18 @@
-import * as ActionTypes from '../../../constants';
+import { setSorting } from '../reducers/sorting';
+import { setSearchTerm } from '../reducers/search';
+
+export { setSearchTerm } from '../reducers/search';
+export { toggleDirectionForField } from '../reducers/sorting';
 
 export const DIRECTION = {
   ASC: 'ASCENDING',
   DESC: 'DESCENDING'
 };
 
-export function setSorting(field, direction) {
-  return {
-    type: ActionTypes.SET_SORTING,
-    payload: {
-      field,
-      direction
-    }
-  };
-}
-
 export function resetSorting() {
   return setSorting('createdAt', DIRECTION.DESC);
 }
 
-export function toggleDirectionForField(field) {
-  return {
-    type: ActionTypes.TOGGLE_DIRECTION,
-    field
-  };
-}
-
-export function setSearchTerm(scope, searchTerm) {
-  return {
-    type: ActionTypes.SET_SEARCH_TERM,
-    query: searchTerm,
-    scope
-  };
-}
-
 export function resetSearchTerm(scope) {
   return setSearchTerm(scope, '');
 }

client/modules/IDE/reducers/search.js

@@ -1,15 +1,24 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   collectionSearchTerm: '',
   sketchSearchTerm: ''
 };
 
-export default (state = initialState, action) => {
-  switch (action.type) {
-    case ActionTypes.SET_SEARCH_TERM:
-      return { ...state, [`${action.scope}SearchTerm`]: action.query };
-    default:
-      return state;
+const searchSlice = createSlice({
+  name: 'search',
+  initialState,
+  reducers: {
+    setSearchTerm: {
+      reducer: (state, action) => {
+        const { scope, query } = action.payload;
+        state[`${scope}SearchTerm`] = query;
+      },
+      prepare: (scope, query) => ({ payload: { scope, query } })
+    }
   }
-};
+});
+
+export const { setSearchTerm } = searchSlice.actions;
+
+export default searchSlice.reducer;

client/modules/IDE/reducers/sorting.js

@@ -1,33 +1,35 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 import { DIRECTION } from '../actions/sorting';
 
 const initialState = {
   field: 'createdAt',
   direction: DIRECTION.DESC
 };
 
-const sorting = (state = initialState, action) => {
-  switch (action.type) {
-    case ActionTypes.TOGGLE_DIRECTION:
-      if (action.field && action.field !== state.field) {
-        if (action.field === 'name') {
-          return { ...state, field: action.field, direction: DIRECTION.ASC };
-        }
-        return { ...state, field: action.field, direction: DIRECTION.DESC };
+const sortingSlice = createSlice({
+  name: 'sorting',
+  initialState,
+  reducers: {
+    toggleDirectionForField: (state, action) => {
+      const { field } = action.payload;
+      if (field && field !== state.field) {
+        const direction = field === 'name' ? DIRECTION.ASC : DIRECTION.DESC;
+        return { ...state, field, direction };
       }
-      if (state.direction === DIRECTION.ASC) {
-        return { ...state, direction: DIRECTION.DESC };
-      }
-      return { ...state, direction: DIRECTION.ASC };
-    case ActionTypes.SET_SORTING:
-      return {
-        ...state,
-        field: action.payload.field,
-        direction: action.payload.direction
-      };
-    default:
-      return state;
+      const direction =
+        state.direction === DIRECTION.ASC ? DIRECTION.DESC : DIRECTION.ASC;
+      return { ...state, direction };
+    },
+    setSorting: {
+      reducer: (state, action) => {
+        const { field, direction } = action.payload;
+        return { ...state, field, direction };
+      },
+      prepare: (field, direction) => ({ payload: { field, direction } })
+    }
   }
-};
+});
+
+export const { toggleDirectionForField, setSorting } = sortingSlice.actions;
 
-export default sorting;
+export default sortingSlice.reducer;