Redux Toolkit: Example usage

On this page

1. Install packages

2. Create store

3. Provide the store to your React app

4. Create a Redux state slice

5. Add slice reducer to the store

6. Use Redux state and actions in your React components

Sources / related posts

1. Install packages

Install Redux Toolkit and React Redux:

npm i @reduxjs/toolkit react-redux

2. Create store

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

The Redux DevTools extension will be configured for you.

3. Provide the store to your React app

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

4. Create a Redux state slice

A slice represents a portion of your app that has some state. You create a slice using createSlice and pass it a name, initial state, and named reducer functions. Your reducer functions can “mutate” the state using Immer.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Redux Toolkit can generate action creators for you based on the reducers you define. Be sure to export the generated action creators and reducer.

5. Add slice reducer to the store

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

6. Use Redux state and actions in your React components

Now, you can use useSelector to read data from the Redux store, and use useDispatch to dispatch actions to update the store:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Sources / related posts

Tagged: Redux

1. Install packages

2. Create store

3. Provide the store to your React app

4. Create a Redux state slice

5. Add slice reducer to the store

6. Use Redux state and actions in your React components

Sources / related posts

Leave a comment Cancel reply