Splitting our Redux Store into Multiple Slices using the createSlice Method

The Redux Toolkit has helped codify the notion that instead of splitting up your redux store into various reducer files, action files, and selector files it should be split into slices. Each slice needs to own the shape of its part of the data and is generally responsible for owning any reducers, selectors or thunks that primarily access or manipulate that information.

It's important that the shape of the data for each slice is clearly defined at the top of the file. With TypeScript this is done with an interface. With plain JavaScript you can still indicate the shape of the data by fully filling out your initialState. Even when the data is null you can add a small comment indicating the expected shape.

RTK's createSlice method simplifies the way reducers are created. Reducers are the place where the redux state gets updated (or actually replaced). An action is passed in to our redux store and each of our reducers has a chance to respond to that action with a new state. Redux reducers without RTK usually feature giant switch statements looking for different action types. With RTK you define reducer methods and the actions and action types associated with those methods are automatically generated.

In store.ts we take all of the reducers generated by these slices and combine them back together into a single redux store with each slice of data owning one key on the main data store object.