React With Redux Toolkit - Part 1
);
};
```
#### Step 2.3: create the `main.jsx` file
We will create the `main.jsx` file.
```jsx title="src/main.jsx"
ReactDOM.createRoot(document.getElementById('root')).render(
,
);
```
### Step 3: create the store
#### Step 3.1: create the `store.js` file
We will create the `store.js` file.
```jsx title="src/app/store.js"
const store = configureStore({
reducer: {},
});
```
As you can see, we have imported the `configureStore` function from `@reduxjs/toolkit` and we have created the store using the `configureStore` function.
Explanation:
- `import { configureStore } from '@reduxjs/toolkit'` - import the configureStore function
- `const store = configureStore({ reducer: {} })` - create the store using the configureStore function
- `export default store` - export the store
We will add the reducer later.
After that, we will make some changes to the `main.jsx` file.
```jsx title="src/main.jsx" ins={3-5} ins={9-11}
ReactDOM.createRoot(document.getElementById('root')).render(
,
);
```
You'll notice that we have wrapped the App component with the `Provider` component, after importing it from the `react-redux` library. We also imported the store from `./app/store`. Then we passed that `store` to the `Provider` component.
Explanation:
- `import { Provider } from 'react-redux'` - import the Provider component
- `import store from './app/store'` - import the store
- `` - pass the store to the Provider component
### Step 4: create the `counterSlice.js` file
We will create the `counterSlice.js` file.
```jsx title="src/components/Counter/counterSlice.js"
const initialState = {
count: 0,
};
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.count += 1;
},
decrement: (state) => {
state.count -= 1;
},
reset: (state) => {
state.count = 0;
},
incrementByAmount: (state, action) => {
state.count += action.payload;
},
},
});
counterSlice.actions;
```
The `createSlice` function is used to create a slice of the store. We passed the name of the slice as `counter` and the initial state as `initialState`. We passed the reducers as an object, holding `increment`, `decrement`, `reset`, and `incrementByAmount`. Then we exported the `increment`, `decrement`, `reset`, and `incrementByAmount` actions, and the reducer itself.
Explanation:
- `import { createSlice } from '@reduxjs/toolkit'` - import the createSlice function
- `const initialState = { count: 0 }` - define the initial state of the slice
- `const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.count += 1 }, decrement: (state) => { state.count -= 1 }, reset: (state) => { state.count = 0 }, incrementByAmount: (state, action) => { state.count += action.payload }, } })` - create the slice of the store
- `export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions` - export the actions
- `export default counterSlice.reducer` - export the reducer
### Step 5: add the `counterSlice` reducer to the store
We will add the `counterSlice` reducer to the store.
```jsx title="src/app/store.js" ins={2} ins={6}
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
```
Now after adding the `counterSlice` reducer to the store, it will be available in the entire application.
Explanation:
- `import counterReducer from '../components/Counter/counterSlice'` - import the counterSlice reducer
- `reducer: { counter: counterReducer }` - add the counterSlice reducer to the store
### Step 6: create the Counter component
We will create the Counter component.
```jsx title="src/components/Counter/Counter.jsx"
const Counter = () => {
const count = useSelector((state) => state.counter.count);
const dispatch = useDispatch();
return (