How to Create Store in React Redux

Managing state across multiple components can quickly become difficult as a React application grows. To handle this, a centralized store is used to keep all application state in one place and update it in a predictable way.

Redux Toolkit

The Redux toolkit acts as a wrapper around Redux and encapsulates its necessary functions. Redux toolkit is flexible and provides a simple way to make a store for large applications. It follows the SOPE principle, which means it is Simple, Opinionated, Powerful, and Effective.

How to Build Redux Store and Manage State

After installing the required modules:

1. Create Redux Store

• Create a file store.js and create a store inside it.
• Also export it, currently it does not include any reducer, we will register the reducers once they created.

Syntax:

export const store = configureStore({  reducer: {  },})

2. Wrap App with Redux Provider

• Inside index.js import store from store.js and provider from react redux.

Syntax:

<Provider store={store}>
    <App />
 </Provider>

3. Create Redux State Slice Reducer

• Now create a slice, this include reducer and initial state.To create slice create another file sliceName.js.
• After that export slice reducer and actions

Syntax:

export const counterSlice = createSlice({
  name: ' ',
  initialState:    ,
  reducers: {
action_name: (state) => update the state;
  }
})

4. Register State Slice in Store

• Just import the slice reducer inside store and register it inside the store.

Syntax:

reducer: {
    counter: reducer_Name,
 }

5. Use Redux State and Dispatch Actions

• Now select the state inside your component using hook:

Syntax:

const state = useSelector( ( state ) => state.slice_name.value )

• Now to update the state we have to dispatch the actions we defined earlier

const dispatch = useDispatch( )
dispatch(action_name( ) )

Exaplanation:

• Below you can see the two button increment and decrement.
• This button will dispatch the increment and decrement action to the store.
• Reducer inside store will update the value of counter according to the action. Here counter is a state.
• And this state available throughout the application and can be manipulated from any component.

Example:

import './App.css';
import {
    useSelector,
    useDispatch
} from 'react-redux'
import {
    decrement,
    increment
} from './store/slices/counterSlice'

function App() {

    const count = useSelector((state) => state.counter.value)
    const dispatch = useDispatch()

    return (
        <div className="App">
            <header className="App-header">
                <p>
                    Counter {count}
                </p>
                <button
                    onClick={() => dispatch(increment())}>
                    Increment
                </button>
                <button
                    onClick={() => dispatch(decrement())}>
                    Decrement
                </button>
            </header>
        </div>
    );
}

export default App;

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './slices/counterSlice'

export const store = configureStore({
    reducer: {
        counter: counterReducer
    },
})

import { createSlice } from '@reduxjs/toolkit'

export 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

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
    reducer: {
    },
})

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './store/store'
import { Provider } from 'react-redux'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

Output: