چگونه با Redux Toolkit شروع کنیم!

Redux Toolkit یک کتابخانه محبوب برای ساده سازی توسعه برنامه های Redux است. مجموعه ای از ابزارهای کمکی را ارائه می دهد که به شما کمک می کند منطق Redux را سریعتر و با کد دیگ بخار کمتر بنویسید. در این پست وبلاگ، مراحل شروع کار با Redux Toolkit را طی خواهیم کرد.

مرحله 1: نصب Redux Toolkit
اولین قدم برای شروع با Redux Toolkit نصب آن است. با اجرای دستور زیر در ترمینال خود می توانید این کار را انجام دهید:

npm install @reduxjs/toolkit react-redux

یا اگر ترجیح می دهید از نخ استفاده کنید:

yarn add @reduxjs/toolkit react-redux

مرحله 2: تعریف کاهش دهنده ها با Redux Toolkit
یکی از ویژگی های اصلی Redux Toolkit، تابع createSlice است. این تابع به شما امکان می دهد یک کاهش دهنده Redux را به همراه اقدامات آن در یک فایل واحد تعریف کنید. در اینجا یک مثال است:

./Reducer.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
  },
})

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

در کد بالا، یک شی counterSlice را تعریف می کنیم که حاوی نام کاهنده ما، مقدار حالت اولیه آن و مجموعه ای از کاهنده ها است که نحوه به روز رسانی حالت را مشخص می کند. تابع createSlice به‌طور خودکار برای هر یک از کاهش‌دهنده‌ها اقدام به تولید می‌کند که ما آن‌ها را صادر کرده و در اجزای خود استفاده می‌کنیم.

مرحله 3: ایجاد یک فروشگاه Redux با Redux Toolkit
هنگامی که Redux Toolkit را نصب کردید، می توانید با استفاده از تابع configureStore یک فروشگاه Redux ایجاد کنید. این تابع یک شی را به عنوان آرگومان می گیرد، جایی که می توانید پیکربندی فروشگاه Redux خود را تعریف کنید.

برای استفاده از Redux Toolkit با React، باید برنامه خود را با یک مؤلفه Provider بپیچید که ذخیره Redux را در اختیار مؤلفه های شما قرار می دهد.

./index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import App from './App'
import reducer from './Reducer'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

const store = configureStore({
  reducer: {
    counter: reducer,
  },
  middleware: [],
  devTools: process.env.NODE_ENV !== 'production',
})
root.render(
  <StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </StrictMode>
);

در کد بالا، ما در حال ایجاد یک فروشگاه Redux با کاهش دهنده خود در مرحله قبل هستیم و آن را به کامپوننت Provider ارسال می کنیم، که کامپوننت App ما را بسته بندی می کند. ما همچنین یک آرایه خالی برای میان افزار و یک پرچم برای فعال کردن افزونه Redux DevTools در حالت توسعه داریم.

مرحله 4: استفاده از حالت Redux و اقدامات در کامپوننت

./App.js
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

در کد بالا، ما قلاب‌های useDispatch و useSelector را از react-redux، و اقدامات افزایش و کاهش را از کاهنده counterSlice وارد می‌کنیم.

در مرحله بعد، می توانید از قلاب useSelector برای دسترسی به مقدار فعلی وضعیت Redux خود استفاده کنید. به عنوان مثال، اگر مقدار شمارنده شما در فروشگاه Redux تحت counter.value ذخیره می شود، می توانید به صورت زیر به آن دسترسی داشته باشید:

در کد زیر، counterValue را از فروشگاه Redux رندر می‌کنیم و دکمه‌هایی را اضافه می‌کنیم که با کلیک کردن، اقدامات افزایش و کاهش را ارسال می‌کنند.

./App.js
 import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement } from './Reducer'

function App() {
  const counterValue = useSelector(state => state.counter)
  const dispatch = useDispatch()

  const handleIncrement = () => {   
    dispatch(increment())
  }

  const handleDecrement = () => {
    dispatch(decrement())
  }

  return (
    <div>
      <h2>Counter: {counterValue}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  )
}
export default App

و بس! با Redux Toolkit، می‌توانید به راحتی از وضعیت Redux و اقدامات موجود در اجزای React خود با کد دیگ بخار کمتری استفاده کنید.

کدپن را اینجا ببینید => https://codesandbox.io/s/reduxtoolkit-3c5xro