Codecademy Logo

Redux Toolkit

Related learning

  • Free course

    Learn Redux

    Enhance your React applications with Redux, a popular state-management library.
    • Intermediate.
      8 hours
  • Skill path

    Create an Advanced Web App with React and Redux

    Learn how to build advanced web applications with React and Redux.
    • Includes 6 Courses
    • With Certificate
    • Intermediate.
      22 hours

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.

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 are:

  • name: the slice name used as the prefix of the generated action.type strings
  • initialState: the initial value for the state to be used by the reducer
  • reducers: an object containing action names as keys and their corresponding case reducers as values. The keys are used to generate action creators with the same names.
/*
The action.type strings created will be
'todos/clearTodos' and 'todos/addTodo'
*/
const options = {
  name: 'todos',
  initialState: [],
  reducers: {
    clearTodos: state => [],
    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 to turn mutating code into immutable updates. This helps to avoid accidentally mutating the state, which is the most commonly made mistake when using Redux.

/* 
addTodo uses the mutating push() method
*/
const todosSlice = createSlice({
  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-generated action creators (todosSlice.actions).

  • The slice reducer is generated from the case reducers provided by options.reducers.
  • The action creators are automatically generated 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).

When creating slices in separate files it is recommended to export the action creators as named exports and the reducer as a default export.

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) 
      => state.push(action.payload)
  }
});


/*
todosSlice = {
  name: "todos",
  reducer: (state, action) => newState,
  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 as a parameter. This object should contain a reducer property that is either assigned a function to be used as the root reducer or an object of slice reducers that will be combined to create a root reducer. When the reducer property is an object, configureStore() will create a root reducer using Redux’s combineReducers() function.

import todosReducer from './todos/todosSlice';
import filterReducer from './filter/filterSlice';


const store = configureStore({
  reducer: {
    todos: todosReducer, 
    filter: filterReducer
  }
});

Installing Redux Toolkit

The @reduxjs/redux-toolkit package is added to a project by first installing it with npm.

Some of the resources imported from @reduxjs/redux-toolkit are:

  • createSlice
  • configureStore
npm install @reduxjs/redux-toolkit

Learn more on Codecademy

  • Free course

    Learn Redux

    Enhance your React applications with Redux, a popular state-management library.
    • Intermediate.
      8 hours
  • Skill path

    Create an Advanced Web App with React and Redux

    Learn how to build advanced web applications with React and Redux.
    • Includes 6 Courses
    • With Certificate
    • Intermediate.
      22 hours
Previous
Next