What is the recommended approach to centralize state handling across multiple React components using Redux

Question

Can you tell me What is the recommended approach to centralize state handling across multiple React components using Redux?

Answer 1

The recommended approach to centralize state handling across multiple React components using Redux involves these steps:

1. Install Redux & React-Redux

npm install redux react-redux @reduxjs/toolkit

2. Create a Redux Slice (features/counterSlice.js)

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;

3. Setup Store (store.js)

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from './features/counterSlice';

const store = configureStore({

  reducer: { counter: counterReducer }

});

export default store;

4. Provide Store in index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './store';

import App from './App';

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

5. Use Redux State in Components (Counter.js)

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement } from '../features/counterSlice';

const Counter = () => {

  const count = useSelector((state) => state.counter.value);

  const dispatch = useDispatch();

  return (

    <div>

      <h1>{count}</h1>

      <button onClick={() => dispatch(increment())}>+</button>

      <button onClick={() => dispatch(decrement())}>-</button>

    </div>

  );

};

export default Counter;