How to get started with Redux Toolkit!

Redux Toolkit is a popular library for simplifying the development of Redux applications. It provides a set of utilities that help you write Redux logic faster and with less boilerplate code. In this blog post, we will go through the steps of getting started with Redux Toolkit.

Step 1: Installing Redux Toolkit
The first step in getting started with Redux Toolkit is to install it. You can do this by running the following command in your terminal:

npm install @reduxjs/toolkit react-redux

Or, if you prefer using Yarn:

yarn add @reduxjs/toolkit react-redux

Step 2: Defining reducers with Redux Toolkit
One of the main features of Redux Toolkit is the createSlice function. This function allows you to define a Redux reducer along with its actions in a single file. Here's an example:

./Reducer.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
})

export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

In the above code, we are defining a counterSlice object that contains the name of our reducer, its initialState value, and a set of reducers that define how the state should be updated. The createSlice function automatically generates action creators for each of the reducers, which we export and use in our components.

Step 3: Creating a Redux store with Redux Toolkit
Once you have installed Redux Toolkit, you can create a Redux store using the configureStore function. This function takes an object as an argument, where you can define your Redux store configuration.

To use Redux Toolkit with React, you need to wrap your app with a Provider component that provides the Redux store to your components.

./index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import App from './App'
import reducer from './Reducer'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
})
root.render(
  <StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </StrictMode>
);

In the above code, we are creating a Redux store with our reducer defined in the previous step and passing it to the Provider component, which is wrapping our App component. we also have an empty array for middleware, and a flag for enabling the Redux DevTools extension in development mode.

Step 4: Using the Redux state and actions in the component

./App.js
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

In the above code, we're importing useDispatch and useSelector hooks from react-redux, and the increment and decrement actions from our counterSlice reducer.

Next, you can use the useSelector hook to access the current value of your Redux state. For example, if your counter value is stored in the Redux store under counter.value, you can access it like this:

In the code below, we're rendering the counterValue from the Redux store and adding buttons that dispatch the increment and decrement actions when clicked.

./App.js
 import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

function App() {
  const counterValue = useSelector(state => state.counter)
  const dispatch = useDispatch()

  const handleIncrement = () => {   
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  return (
    <div>
      <h2>Counter: {counterValue}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  )
}
export default App

And that's it! With Redux Toolkit, you can easily use the Redux state and actions in your React components with less boilerplate code.

View codepen here => https://codesandbox.io/s/reduxtoolkit-3c5xro

Comments

[Mark Erikson]

Hi, I'm a Redux maintainer. Unfortunately, this suggested line in the setup code is wrong:

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  middleware: [],
  devTools: process.env.NODE_ENV !== 'production',
})

This will eliminate all middleware from being added to the Redux store. The default middleware setup adds the redux-thunk middleware, as well as two middleware for development-mode checks. Please do not turn any of those off!

You can just eliminate the middleware line entirely:

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
})