Raw RTK

Redux Toolkit দিয়ে Raw Redux এর তুলনায় অনেক কম কোড লিখে একই কাজ করা যায়।

ধাপ- 1,2,3,4: createSlice

counterSlice.js


const { createSlice } = require("@reduxjs/toolkit");
 
// initial state
const initialState = {
  count: 0,
};
 
// createSlice
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state, action) => {
      state.count++;
    },
    decrement: (state, action) => {
      state.count--;
    },
  },
});
 
module.exports = counterSlice.reducer;
module.exports.counterActions = counterSlice.actions;

⚠️কয়েকটা বিষয় লক্ষনীয়

createSlice এর মধ্যে reducers, not reducer।

reducers অবজেক্টের প্রোপার্টিগুলোই আসলে action creator হিসেবে কাজ করবে। যেহেতু action creator একাধিক হতে পারে তাই reducers ।

module.exports.counterActions = counterSlice.actions; এখানে counterActions এটা যেকোন নামেই হতে পারবে। এটাই হচ্ছে reducers/Actions এর নাম এবং এটা একটা অবজেক্ট। action dispatch করার সময় counterActions.actionName কে dispatch করতে হবে।

আবার, অপরদিকে module.exports = counterSlice.reducer এখানে কিন্তু counterSlice.reducer কারণ, একটা Slice থেকে সব কিছু হিসাব নিকাশ করে একটা reducer তৈরি হবে।

ধাপ-৫: Store


 
const { configureStore } = require("@reduxjs/toolkit");
const counterReducer = require("../../redux/counter/reducer");
const dynamicCounterSlice = require("../features/dynamicCounter/dynamicCounterSlice");
 
const store = configureStore({
  reducer: {
    counter: counterReducer,
    dynamicCounter: dynamicCounterSlice,
  },
});
 
module.exports = store;

configureStore automatically Redux DevTools এবং redux-thunk setup করে দেয়।

Usage Examples

Simple Counter


 
const store = require("./app/store");
const { counterActions } = require("./features/counter/counterSlice");
 
// subscribe to state changes
store.subscribe(() => {
  console.log(store.getState());
});
 
// dispatch actions
store.dispatch(counterActions.increment());
store.dispatch(counterActions.increment());
store.dispatch(counterActions.decrement());

Simple counter — payload ছাড়া increment/decrement।

Raw Redux vs RTK

RTK এর সুবিধা: - 90% কম boilerplate code - Immer দিয়ে safe mutations (state.count++) - Automatic action creators - Built-in DevTools ও thunk support