Redux vs. Redux Toolkit, What’s the Difference?

Seemingly overnight Redux Toolkit has become the de facto standard when rolling out Redux in a React application. In this blog post, I’m going to break down the core differences between the two so you can quickly and efficiently understand the advantages that this new NPM package provides.

At the core of Redux Toolkit is the createSlice function. The function is referred to as a slice because it is concerned with a single part of the state tree. In the below example, this is the ‘expenses’ state.

Whereas previously in Redux you were required to write action creators separately, one of the great things about createSlice is that it automatically generates the actions for you.

In the below expensesSlice, each key with ‘reducers’ corresponds to an action that can be exported and operated upon. No switch statements, no problem.

export const expensesSlice = createSlice({
     name: "expenses",
     initialState: {
        expenses: [],
     },
     reducers: {
        setExpenses: (state, action) => {
          return { ...state, expenses: [...action.payload] };
        },
        newExpenses: (state, action) => {
           return { ...state, expenses: [ action.payload,