ابزار redux toolkit

ابزار redux toolkit بوجود آمده است تا استفاده برنامه نویسان از redux را آسانتر کند.

برای استفاده از redux toolkit ابتدا آنرا به پروژه جاوااسکریپت خود اضافه میکنیم :

npm install @reduxjs/toolkit react-redux

ساخت slice

ابتدا یک فایل بنام store/counterSlice.ts ایجاد میکنیم. برای ایجاد slice ، ابتدا تابع createSlice را از @redux-toolkit به فایل خود ایمپورت میکنیم :

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

تابع createSlice بعنوان ورودی یک object با سه پراپرتی دریافت میکند :

interface CounterState {
   value:number;
}

const initialState:CounterState = {
   value:0,
}

const counterSlice = createSlice({
   name: 'counter',
   initialState,
   reducers:{
      increment: (state,action) => {
         state.value += action.payload
      },
      decrement: (state) => {
         state.value -= 1
      },
   }
});

پراپرتی name : باید یک نام یکتا برای هر slice در نظر بگیریم.

پراپرتی initialState : حالت شروع برای هر slice می‌باشد.

پراپرتی reducers : همه reducerهای مرتبط به یک slice را مشخص میکند.

در این مثال counterSlice دو reducer برای کاهش و افزایش مقدار شمارنده دریافت میکند.

هر reducer دو ورودی دارد. state و action که اختیاری است.

برای استفاده از یک slice باید reducer و action های ایجاد شده برای آن slice را export کنیم :

export const {increment , decrement} = counterSlice.actions;
export default counterSlice.reducer;

فایل counterSlice.ts :

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

interface CounterState {
   value:number;
}

const initialState:CounterState = {
   value:0,
}

const counterSlice = createSlice({
   name: 'counter',
   initialState,
   reducers:{
      increment: (state,action) => {
         state.value += action.payload
      },
     decrement: (state) => {
        state.value -= 1
     },
 }
});

export const {increment , decrement} = counterSlice.actions;
export default counterSlice.reducer;

درون یک برنامه میتوان چندین slice مختلف ایجاد کنیم. برای مثال دیتای هر بخش برنامه را درون یک slice قرار میدهیم

ایجاد store :

برای ایجاد store ابتدا تابع configureStore را به فایل store.ts ایمپورت میکنیم :

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

سپس reducer مربوط به هر slice را درون فایل خود import میکنیم.

import counter from './counterSlice';
...

در این پروژه فقط یک slice داریم.

برای ایجاد store از تابع configutrStore بجای createStore استفاده میکنیم :

const store = configureStore({
   reducer:{
      counter,
      ...
}
});

این تابع یک object در ورودی دریافت می‌کند. پراپرتی اصلی که باید مقدار دهی کنیم پراپرتی reducer می‌باشد. این پراپرتی لیست کامل reducer های مربوط اسلایس ها را دریافت می‌کند.

فایل store/index.ts :

import { configureStore } from '@reduxjs/toolkit'
import counter from './counterSlice';

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

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>

// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

export default store;

استفاده در کامپوننتهای برنامه

برای استفاده از store در کامپوننتها باید همانند قبل store را به برنامه خود معرفی کنیم :

import { Provider } from 'react-redux';
import store, { RootState } from './store';

function App() {
   return (<Provider store={store}>
      <Counter />
   </Provider>);
}

برای نمایش مقدار state به سراغ component خود رفته و با استفاده از هوک useSelector مقدار شمارنده را نمایش میدهیم :

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

function Counter(){
   const counter = useSelector((store:RootState)=>store.counter.value);
   return (<>
       <h3>{counter}</h3>
       <button >Increment</button>
      <button >Decrement</button>
   </>)
}

برای تغییر مقدار شمارنده باید از اکشنهای ایجاد شده هر slice استفاده کنیم:

function Counter(){
    const counter = useSelector((store:RootState)=>store.counter.value);
   const dispatch = useDispatch();
   return (<>
      <h3>{counter}</h3>
     <button ={()=>dispatch(increment(1))}>Increment</button>
     <button ={()=>dispatch(decrement())}>Decrement</button>
   </>)
}