Writing modern Redux in 2020 - The powerful createSlice
Tags: react, redux, javascript, reactredux
Published: 2020-01-24 15:38:40

---
title: Writing modern Redux in 2020 - The powerful createSlice
published: true
description: Going one step further in your new applications using Redux
tags: react, redux, javascript, react-redux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pd60wbuchkbbf54s6d3d.jpg
canonical_url: https://dev.to/vcapretz/writing-modern-redux-in-2020-the-powerful-createslice-1i5m
---

In my last post, I wrote a short [introduction to Redux Toolkit](https://dev.to/vcapretz/writing-modern-redux-in-2020-redux-toolkit-b9) and its basic functionalities. But I still need to talk about their most important function - called `createSlice` - which is probably the only one you will need to use for most applications you're writing.

## What is `createSlice`? 

If you've ever built an application with Redux you probably ended up with a store that contains multiple reducers, each of them dealing with certain parts of the app. Then you combine all of them in what's usually called a _rootReducer_, which is then used to create the store itself.

So your store creation would look something like: 

{% gist https://gist.github.com/vcapretz/10ec2a0a75965d814937983425cee754 %}

Each of these key-value pairs is a "slice" of your application. You can read more about the logic for splitting reducers in the [Redux documentation](https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic/).

`createSlice` comes in handy because it deals with everything you need for each _slice_, so instead of calling `createAction` and `createReducer` manually, you would use one single function as a replacement.

A basic example would be: 

{% gist https://gist.github.com/vcapretz/c6feae1823ad08f7103c07a0bfd2df02 %}

Where the returned object from `createSlice` will be: 

```javascript
{
  name: "todos",
  reducer: (state, action) => newState,
  actions: {
    addTodo: (payload) => ({type: "todos/addTodo", payload}),
    toggleTodo: (payload) => ({type: "todos/toggleTodo", payload})
  },
  caseReducers: {
    addTodo: (state, action) => newState,
    toggleTodo: (state, action) => newState,
  }
}
```

So now we've got everything we need:

- The `name` parameter will be the prefix for all of your action types,
- `initialState` is used for the store;
- The reducers are again methods in an object, where they can still mutate the state directly - thanks to [immer](https://github.com/immerjs/immer) - it works exactly like `createReducer`;
- One action is created for each reducer, they all have the same function signature and the _type_ property is derived from the slice name plus the reducer method - like "todos/addTodo" and "todos/toggleTodo";
- The actions receive only a "payload" parameter, which is recommended according to the [Flux Standard Action pattern](https://github.com/redux-utilities/flux-standard-action). If you need to pass in more than one parameter, put them in an object.

## Working with multiple slices

Most projects will contain many slices, it's a nice approach to separate them by features so they contain smaller logic for handling each part of the store. For these projects `createSlice` is probably all you're going to need, where each slice should be in separate files containing a default export for the reducer and named exports for the actions.

Putting it all together you would end up with something like:

{% gist https://gist.github.com/vcapretz/008766eb466261938108d149b5599d09 %}

## Conclusion 

Since Redux Toolkit is an opinionated tool and Redux has been more explicit about what rules you should follow and how you should structure your app, you can have the peace of mind that your apps are going to follow those rules by default.

I believe that now we are all able to write better applications with Redux, removing a lot of the boilerplate code we wrote in the past years and making it easier to maintain our codebases. Software development keeps evolving and sometimes it's natural we need to learn new things. I hope now you have enough information to start using Redux Toolkit in your projects!

Please check [this page with a step by step guide on how to migrate to the new approach](https://redux-toolkit.js.org/tutorials/intermediate-tutorial). And if you want to understand more deeply about some of the guidelines mentioned in this article check the [Redux Style Guide page](https://redux.js.org/style-guide/style-guide).

All feedback is welcome! Comment below if you have any questions and like the post if you enjoyed reading it 😄

Feel free to follow me - [@vcapretz](https://twitter.com/vcapretz) - on Twitter to keep in touch, my DM's are always open!

_Thank you [Erik Engervall](https://github.com/erikengervall) for reviewing the post for me!_
_Cover photo by [Денис Евстратов](https://unsplash.com/@_evstratov_?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/modern?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_