In the evolving landscape of web development, React has become a go-to library for building user interfaces. However, managing state efficiently, especially in complex applications, can often pose challenges. Enter Redux Toolkit: a standardized approach to use Redux that simplifies store creation and leads to more manageable code. This crash course will provide you with everything you need to know to get started with React and Redux Toolkit, whether you\u2019re building a small app or a massive one.<\/p>\n
React is a JavaScript library designed for building user interfaces through reusable UI components. Traditionally, React has relied on local state management which can become cumbersome as your application scales. This is where Redux comes into play. Redux is a state management library that helps maintain the global state of your application, allowing for a more predictable and centralized state management.<\/p>\n
However, using Redux has historically involved a steep learning curve, particularly with its boilerplate code. Redux Toolkit simplifies this process significantly.<\/p>\n
Redux Toolkit is an official, opinionated toolset for efficient Redux development. It serves as a foundation for building Redux applications and comes packed with features that reduce boilerplate and make state management more intuitive.<\/p>\n
Let\u2019s get your development environment ready and dive right into code!<\/p>\n
We’ll start by creating a new React application and installing Redux Toolkit.<\/p>\n
npx create-react-app my-app\ncd my-app\nnpm install @reduxjs\/toolkit react-redux<\/code><\/pre>\nThis will set up a new React project named my-app<\/strong> and install Redux Toolkit along with the React bindings for Redux.<\/p>\n2. Creating the Redux Store<\/h3>\n
Next, you’ll create a Redux store using configureStore<\/strong>. Follow these steps:<\/p>\nimport { configureStore } from '@reduxjs\/toolkit';\nimport { Provider } from 'react-redux';\nimport rootReducer from '.\/features'; \/\/ Assume you have a rootReducer\n\nconst store = configureStore({\n reducer: rootReducer,\n});<\/code><\/pre>\nAdd the Provider<\/strong> component to make the Redux store accessible throughout your application.<\/p>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport { Provider } from 'react-redux';\nimport store from '.\/store'; \/\/ Your store file\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);<\/code><\/pre>\n3. Creating a Slice<\/h3>\n
With the store set up, the next step is to define a slice. A slice is a piece of the Redux state and the reducer logic for that state.<\/p>\n
import { createSlice } from '@reduxjs\/toolkit';\n\nconst counterSlice = createSlice({\n name: 'counter',\n initialState: { value: 0 },\n reducers: {\n increment: (state) => {\n state.value += 1;\n },\n decrement: (state) => {\n state.value -= 1;\n },\n incrementByAmount: (state, action) => {\n state.value += action.payload;\n },\n },\n});\n\n\/\/ Export actions for use in components\nexport const { increment, decrement, incrementByAmount } = counterSlice.actions;\n\/\/ Export the reducer to be used in the store\nexport default counterSlice.reducer;<\/code><\/pre>\nThis example creates a counterSlice<\/strong> that contains the counter value and three actions to handle it.<\/p>\n4. Adding the Slice Reducer to the Store<\/h3>\n
You need to integrate the slice reducer into the Redux store.<\/p>\n
import { combineReducers } from 'redux';\nimport counterReducer from '.\/counterSlice';\n\nconst rootReducer = combineReducers({\n counter: counterReducer,\n});\n\nexport default rootReducer;<\/code><\/pre>\n5. Using Redux State in React Components<\/h3>\n
Now, let’s see how you can use the Redux state in your React components.<\/p>\n
For instance, create a component that displays the counter and buttons to manipulate it:<\/p>\n
import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { increment, decrement, incrementByAmount } from '.\/counterSlice';\n\nconst Counter = () => {\n const count = useSelector((state) => state.counter.value);\n const dispatch = useDispatch();\n\n return (\n \n {count}<\/h1>\n