Redux + RTX Basics

The provided code snippet demonstrates how to integrate Redux into a React application using the @reduxjs/toolkit library. Below is an explanation of the key components and their roles:

1. Redux Store Setup

javascript
 
1import { configureStore } from '@reduxjs/toolkit';
2import counterReducer from './features/counter/counterSlice';
3
4export const store = configureStore({
5  reducer: {
6    counter: counterReducer,
7  },
8});

• configureStore: This function is used to create a Redux store with the provided reducers.
• counterReducer: The reducer for managing state related to the counter feature.

2. Counter Slice

javascript
 
1import { createSlice } from '@reduxjs/toolkit';
2
3export const counterSlice = createSlice({
4  name: 'counter',
5  initialState: {
6    value: 0,
7    input: '',
8  },
9  reducers: {
10    increment(state) {
11      state.value += 1;
12    },
13    decrement(state) {
14      state.value -= 1;
15    },
16    reset(state) {
17      state.value = 0;
18    },
19    incrementByAmount: (state, action) => {
20      state.value += Number(action.payload);
21    },
22
23[Read the full article at DEV Community](https://dev.to/menard_codes/redux-rtx-basics-9ep)
24
25---
26
27**Want to create content about this topic?** [Use Nemati AI tools](https://nemati.ai) to generate articles, social posts, and more.