Last updated on Mar 28, 2023 by Suraj Sharma
Redux Toolkit is a popular library for building Redux applications. It provides a set of tools and utilities that can help you reduce boilerplate code and simplify your application logic. In this guide, we will go through the steps of setting up Redux Toolkit and using it to manage state in a simple application.
Before we start, make sure you have the following installed on your system:
Node.js and NPM (Node Package Manager)
A code editor of your choice (such as Visual Studio Code)
To get started with Redux Toolkit, we first need to create a new React application. Run the following commands in your terminal:
npx create-react-app my-app
cd my-app
npm start
This will create a new React application called "my-app" and start a local development server.
Next, we need to install Redux Toolkit. Run the following command in your terminal:
npm install @reduxjs/toolkit
In Redux, the state of your application is managed by a single object called the store
. To set up the store, we first need to define a slice
of the state that we want to manage.
A slice is a specific part of the state that is managed by a reducer function. A reducer function takes the current state and an action, and returns a new state based on the action.
Create a new file called "counterSlice.js" in your project's "src" folder and add the following code:
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
},
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
This code defines a slice of the state called counter
, with an initial value of 0
. It also defines two reducer functions, increment
and decrement
, that modify the value of the state.
We also export the increment
and decrement
actions, as well as the reducer function, which will be used to create the store.
Next, we need to create the store. Create a new file called "store.js" in your project's "src" folder and add the following code:
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
export default configureStore({
reducer: {
counter: counterReducer,
},
});
This code imports the configureStore
function from Redux Toolkit, as well as the counterReducer
from our "counterSlice.js" file. We then use the configureStore
function to create the store, with the counterReducer
as the reducer for the counter
slice of the state.
Now that we have set up the store, we need to connect our components to it so that they can access and modify the state.
Create a new file called "App.js" in your project's "src" folder and add the following code:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
function App() {
const counter = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}
export default App;
This code imports the useSelector
and useDispatch
hooks from the react-redux
library. The useSelector
hook is used to extract data from the Redux store, and the useDispatch
hook is used to dispatch actions to the store.
We use the useSelector
hook to get the current value of the counter
slice of the state, and the useDispatch
hook to get a reference to the dispatch function.
The return
statement renders a simple UI that displays the current value of the counter and two buttons that dispatch the increment
and decrement
actions when clicked.
That's it! You have now set up a Redux store with Redux Toolkit, defined a slice of the state, and connected your components to the store.
Of course, this is just a simple example, and there's a lot more you can do with Redux Toolkit. I encourage you to explore the documentation and experiment with different features and APIs.
I hope you found this guide helpful! Let me know if you have any questions or concerns.
Related Solutions
Rate this post
Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.