Redux Toolkit is the official, recommended way to write Redux logic. It provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in. In this blog, we’ll walk through the basics of integrating Redux Toolkit with a React application.
What is Redux Toolkit?
Redux Toolkit is a set of tools that helps simplify the process of writing Redux logic. It includes utilities to simplify common use cases like store setup, creating reducers, and writing immutable update logic.
Setting Up Redux Toolkit with React
Let’s go through the steps to set up Redux Toolkit in a React application.
Step 1: Install Dependencies
First, you need to install the necessary packages. You can do this using npm or yarn.
Step 2: Create a Redux Store
The store is the object that brings Redux to life. With Redux Toolkit, you can create a store using the configureStore function.
import { configureStore } from ‘@reduxjs/toolkit‘;
import counterReducer from ‘./features/counter/counterSlice‘;
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
Step 3: Create a Slice
A slice is a collection of Redux reducer logic and actions for a single feature of your app. Redux Toolkit’s createSlice function generates action creators and action types automatically.
import { createSlice } from ‘@reduxjs/toolkit‘;
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;
Step 4: Provide the Store to Your React Application
To make the Redux store available to your React components, you need to use the Provider component from react-redux.
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { Provider } from ‘react-redux‘;
import App from ‘./App‘;
import store from ‘./store‘;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById(‘root‘)
);
Step 5: Connect React Components to the Redux Store
To connect a React component to the Redux store, you can use the useSelector and useDispatch hooks from react-redux.
import { useSelector, useDispatch } from ‘react-redux‘;
import { increment, decrement } from ‘../features/counter/counterSlice‘;
function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}
export default Counter;
Step 6: Use the Connected Component in Your App
Finally, you can use the connected component in your application.
import Counter from ‘./components/Counter‘;
function App() {
return (
<div>
<Counter />
</div>
);
}
export default App;
Conclusion
By following these steps, you can set up Redux Toolkit in your React application to manage state in a predictable and maintainable way. Redux Toolkit simplifies many of the common tasks when working with Redux, making it easier to write and maintain your Redux logic.
Further Exploration
For those who want to dive deeper into Redux Toolkit and React, here are some valuable resources:
Redux Toolkit Documentation: The official documentation provides comprehensive guides and API references.
React Redux Documentation: Learn more about how to use Redux with React.
Redux Essentials Tutorial: A step-by-step tutorial to get you up and running with Redux Toolkit.
Redux Fundamentals Tutorial: A detailed tutorial covering the core concepts of Redux.
Thanks for reading!
Po.
