In this tutorial, we'll build a simple application with two buttons that change the counter value. This will allow you to see the basic concepts of Redux Toolkit.
To integrate it, we need two packages, the Toolkit itself and react-redux.
# Run at the root of the project
npm install @reduxjs/toolkit react-redux
Before we start putting the puzzle together, let's look at the directory structure that we'll start from. This structure is the simplest, but not the only possible one.
components/
| App.jsx
slices/
| index.js
| counterSlice.js
index.jsx
Let's start at the top level. Here we need the <Provider>
component, which contains the repository and sneaks it deep into the component tree via the context.
// file: index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './components/App.jsx';
import store from './slices/index.js';
const mountNode = document.getElementById('container');
const root = ReactDOM.createRoot(mountNode);
// Wrapping the application in a Provider
// and passing the repository into it
root.render(
<Provider store={store}>
<App />
</Provider>,
);
We initialize the repository using the configureStore()
function, which, unlike the same function in Redux, knows how to combine redusers independently. The function takes as input an object with the reducer
key, the value of which is an object with reducers.
// file: slices/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../slices/counterSlice.js';
export default configureStore({
reducer: {
// counter is the name inside the state.counter object
counter: counterReducer,
},
});
The reducers themselves are in the slices directory. Toolkit introduces a new concept,Slice which combines Reducers, Actions and more. We'll talk more about slices in the next lesson.
// file: slices/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
// Initial value
const initialState = {
value: 0,
};
const counterSlice = createSlice({
name: 'counter',
initialState,
// Reducers in slices mutate the state and return nothing to the outside
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
// example with data
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
// Slice generates actions that are exported separately
// Actions are generated automatically from reducer key names
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
// By default, the reducer generated by the slice is exported
export default counterSlice.reducer;
Now the most important thing, let's look at the Toolkit in action. Here we rely on hooks. As before, to change the state in the repository, we must pass an action to the dispatch()
function. The useDispatch()
function is used to get the dispatch..
// file: components/App.jsx
import React from 'react';
// The hooks are in react-redux
import { useSelector, useDispatch } from 'react-redux';
// Importing the desired actions
import { decrement, increment } from '../slices/counterSlice.js';
export default () => {
// Pulling data from the store. state means the whole state
const count = useSelector((state) => state.counter.value);
// Returns the store.dispatch() method of the current store
const dispatch = useDispatch();
return (
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Add
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Take away
</button>
</div>
</div>
);
};
And here's a real-life example:
See the Pen js_redux_toolkit_integration-1 by Hexlet (@hexlet) on CodePen.
Part of this initialization is done once and then hardly ever changes. The main application code will be added in components and slices. And unlike pure Redux, there will be much less of this code, thanks to the slices and the ability to mutate the data within the reduces. More on this in the next lesson.
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.