Cheatsheets / Redux

Refactoring with Redux Toolkit

Redux Toolkit
Redux Toolkit, also known as the @reduxjs/redux-toolkit
package, contains packages and functions that are
essential for building a Redux app. Redux Toolkit simplifies
most Redux tasks like setting up the store, creating
reducers and performing immutable updates.

Installing Redux Toolkit

The @reduxjs/redux-toolkit package is added to a
project by first installing it with npm . npm install @reduxjs/redux-toolkit
Some of the resources imported from @reduxjs/redux-
toolkit are:

● createSlice

● configureStore

createSlice() Options Object

The createSlice() function is used to simplify and
reduce the code needed when creating application slices. /*
It takes an object of options as an argument. The options The action.type strings created will be
are: 'todos/clearTodos' and 'todos/addTodo'
*/
● name : the slice name used as the prefix of the
const options = {
generated action.type strings
  name: 'todos',
● initialState : the initial value for the state to be
  initialState: [],
used by the reducer
  reducers: {
● reducers : an object of action names and their     clearTodos: state => [],
corresponding case reducers     addTodo: (state, action)
      => [...state, action.payload]
  }
}
const todosSlice = createSlice(options);
“Mutable” Code with createSlice()
createSlice() lets you write immutable updates using
“mutation-like” logic within the case reducers. This is /*
because createSlice() uses the Immer library internally addTodo uses the mutating push() method
to turn mutating code into immutable updates. This helps */
to avoid accidentally mutating the state, which is the most
const todosSlice = createSlice({
commonly made mistake when using Redux.
  name: 'todos',
  initialState: [],
  reducers: {
    clearTodos: state => [],
    addTodo: (state, action)
      => state.push(action.payload)
  }
});

Slices with createSlice()

createSlice() returns an object containing a slice
reducer ( todosSlice.reducer ) and corresponding auto- const todosSlice = createSlice({
generated action creators ( todosSlice.actions ).   name: 'todos',
  initialState: [],
● The slice reducer is generated from the case
  reducers: {
reducers provided by options.reducers .
    addTodo: (state, action)
● The action creators are automatically generated       => state.push(action.payload)
and named for each case reducer. The
  }
action.type values they return are a combination
});
of the slice name ( 'todos' ) and the action name
( 'addTodo' ) separated by a forward slash
( todos/addTodo ). /*
todosSlice = {
When creating slices in separate files it is recommended   name: "todos",
to export the action creators as named exports and the   reducer: (state, action) => newState,
reducer as a default export.   actions: {
    addTodo: (payload) => ({type:
"todos/addTodo", payload})
  },
  caseReducers: {
    addTodo: (state, action) => newState
  }
}
*/

export { addTodo } = todosSlice.actions;

export default todosSlice.reducer;
Create store with configureStore()
configureStore() accepts a single configuration object
parameter. The input object should have a reducer import todosReducer from
property that is assigned a function to be used as the root '.todos/todosSlice';
reducer, or an object of slice reducers which will be import filterReducer from
combined to create a root reducer. When reducer is an '.filter/filterSlice';
object configureStore() will create a root reducer using
Redux’s combineReducers() .
const store = configureStore({
  reducer: {
    todos: todosReducer,
    filter: filterReducer
  }
});