{"id":1363,"date":"2025-02-08T00:00:00","date_gmt":"2025-02-07T23:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/reduxjs-toolkit-createslice\/"},"modified":"2025-11-28T13:31:41","modified_gmt":"2025-11-28T12:31:41","slug":"reduxjs-toolkit-createslice","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/reduxjs-toolkit-createslice\/","title":{"rendered":"ReduxJS\/Toolkit: createSlice and configureStore"},"content":{"rendered":"

createSlice<\/h1>\n
import { createSlice, PayloadAction } from \"@reduxjs\/toolkit\";\n\nexport const todoSlice = createSlice({\n  \/\/ Action prefix: todos\/addTodo, todos\/removeTodo etc\n  name: \"todos\",\n  initialState: [] as Todo[],\n  reducers: {\n    \/\/ A default reducer:\n    \/\/ The actions are exported from the reducers (below)\n    removeTodo: (state, action: PayloadAction<number>) => {\n      return state.filter(todo => todo.id !== action.payload);\n    },\n\n    \/\/ A prepared reducer\n    \/\/ When you need to modify the payload before handling\n    addTodo: {\n      reducer: (state, action: PayloadAction<Todo>) => {\n        state.push(action.payload);\n      },\n      prepare: (todo: Partial<Todo>) => {\n        \/\/ The addTodo action takes a Partial<Todo>\n        \/\/ But the reducer handles a complete Todo.\n        const payload = {\n          text: 'Default Text',\n          ...todo,\n        };\n        return { payload };\n      }\n    },\n  },\n\n\n  \/\/ We'll get into more detail in Part 4: createAsyncThunk\n  extraReducers: builder => {\n    \/\/ This is where we would handle the pending, fulfilled and rejected actions\n    \/\/ from a createAsyncThunk\n\n    \/\/ Handling an action from another slice is also a use case for extraReducers\n    builder.addCase(addCustomer, (state, action: PayloadAction<{name: string}>) => {\n      state.push({text: `Onboard new customer ${action.payload.name}`});\n    });\n  },\n\n\n  \/\/ We'll get into more detail in Part 6: createSelector\n  selectors: {\n    selectTodo: (state, id: number): Todo | undefined => {\n      return state.find(x => x.id === id);\n    },\n  }\n});\n\nexport const { addTodo, removeTodo } = todoSlice.actions;\nexport const { selectTodo } = todoSlice.selectors;\n<\/code><\/pre>\n
Dispatching an action<\/h2>\n
See Part 5: TypeScript<\/a> for how to create the useAppDispatch<\/code> hook.<\/p>\n
import { addTodo } from \".\/todoSlice\";\n\nconst TodoAdd = () => {\n  const dispatch = useAppDispatch();\n  const [todo, setTodo] = useState<Todo>({});\n  return <button onClick={() => dispatch(addTodo(todo))}>Add<\/button>\n}\n<\/code><\/pre>\n
configureStore<\/h1>\n
Once you\u2019ve defined some slices, time to combine them into your store.<\/p>\n
\/\/ Create the store\nimport { configureStore } from \"@reduxjs\/toolkit\";\n\nconst store = configureStore({\n  reducer: {\n    todos: todoSlice.reducer,\n    user: userSlice.reducer,\n  },\n\n  \/\/ DevTools extension is added by default\n  \/\/ Here we disable it for production:\n  devTools: process.env.NODE_ENV !== 'production',\n\n  \/\/ Optionally hydrate the store from somewhere:\n  preloadedState: localStorage.getItem('redux'),\n});\n\n\n\/\/ Bind it to our main <App \/> component\nimport { createRoot } from \"react-dom\/client\";\nimport { Provider } from \"react-redux\";\n\nconst root = createRoot(\n  document.getElementById('root')\n);\nroot.render(\n  <Provider store={store}>\n    <App \/>\n  <\/Provider>\n);\n<\/code><\/pre>\n
This will create a store with \u201cRootState\u201d:<\/p>\n
type RootState = {\n  todos: ReturnType<typeof todoSlice.getInitialState>;\n  user: ReturnType<typeof userSlice.getInitialState>;\n}\n<\/code><\/pre>\n
It really doesn\u2019t get any easier than that. Without overriding anything, this will also setup the must have Redux DevTools Extension<\/a> (\u2b50 13k).<\/p>\n
This can be overriden\/configured by passing devTools: false | DevToolsOptions<\/code> to configureStore<\/code>.<\/p>\n
Middleware<\/h2>\n
The redux-thunk<\/a> middleware is added by default, since you are going to be doing some http calls \ud83d\ude0a<\/p>\n
During development builds, the following middleware is also automatically added<\/a><\/p>\n