একাধিক Reducer

একাধিক Reducer এর ক্ষেত্রে

একাধিক reducer থাকলে combineReducers() দিয়ে সবগুলোকে একটা root reducer-এ কম্বাইন করতে হবে। কারণ store সবসময় একটা reducer গ্রহণ করে।

📌 ধাপ-1. ধাপ-1 Action Identifier


export const INCREMENT = "increment";
export const DECREMENT = "decrement";

📌 ধাপ-2. Action অথাবা Action Handler অথবা Action Creator


import { DECREMENT, INCREMENT } from "./actionIdentifier";
 
export const ACT_increment = () => {
  return {
    type: INCREMENT,
  };
};
 
export const ACT_decrement = () => {
  return {
    type: DECREMENT,
  };
};

📌 ধাপ-3. Initial State অথবা State


import { DECREMENT, INCREMENT } from "./actionIdentifier";
 
const initialState = {
  value: 20,
};

📌 ধাপ-4.1 Reducer


export const RD_counter = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        value: state.value + 1,
      };
    case DECREMENT:
      return {
        ...state,
        value: state.value - 1,
      };
 
    default:
      return state;
  }
};

📌 ধাপ 4.2 combineReducers


{/*  একাধিক Reducer থাকলে সবগুলোকে একটা Reducer মধ্যে রাখতে হবে। 
 কারণ আমদের store সবসময় একটা reducer গ্রহণ করবে। 
 এই একাধিক reducer কে combineReducers()এর মধ্যে অবজেক্ট আকারে  দিতে  হবে।
*/} 
 
import { combineReducers } from "redux";
import { RD_counter } from "./feature/counter/reducer";
import { RD_counter_payload } from "./feature/counterWithPayload/reducer";
 
export const rootReducer = combineReducers({
  counter: RD_counter,
  counterWithPayload: RD_counter_payload,
});

📌 ধাপ-5. Store


import { createStore } from "redux";
import { rootReducer } from "./rootReducer";
 
export const store = createStore(rootReducer);

📌 ধাপ-6. Provider


import { Provider } from "react-redux";
import { store } from "./store";
 
export function Providers({ children }) {
  return <Provider store={store}>{children}</Provider>;
}

📌 ধাপ-7 Wrapper


import { Providers } from "@/redux/providers";
 
<Providers>
  <App/>
</Providers>