React中如何使用Redux Toolkit簡化Redux的開發

Redux Toolkit 是一個官方推薦的工具集，它可以幫助簡化 Redux 的開發流程。下面是在 React 中如何使用 Redux Toolkit：

1. 安裝 Redux Toolkit：在項目中安裝 Redux Toolkit 依賴包。

npm install @reduxjs/toolkit

2. 創建 Redux store：使用 createSlice 和 configureStore 方法創建 Redux store。

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

const initialState = {
  counter: 0
};

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

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

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

export default store;

3. 使用 Redux store：在 React 組件中使用 Redux store。

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './store';

const Counter = () => {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

通過以上步驟，你可以在 React 中使用 Redux Toolkit 簡化 Redux 的開發流程。Redux Toolkit 提供了一些方便的方法和工具，幫助你更容易地管理 Redux store、reducers 和 actions。