redux-toolkit 流程与使用

Redux Toolkit 是一个官方提供的 Redux 工具包，它提供了一些工具函数来简化 Redux 开发流程，包括：

1. createAction：用于生成 action creator。
2. createReducer：用于生成 reducer。
3. createSlice：将 createAction 和 createReducer 结合起来，用于生成包含 action creators 和 reducers 的 slice。
4. configureStore：用于自动生成 Redux store，并且集成了一些常用的中间件。

下面是 Redux Toolkit 的基本使用流程：

1. 安装 redux 和 @reduxjs/toolkit：

npm install redux @reduxjs/toolkit

1. 创建 slice：

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

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value++;
    },
    decrement(state) {
      state.value--;
    }
  }
});

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

export default counterSlice.reducer;

在上面的代码中，我们使用 createSlice 函数创建了一个名为 counter 的 slice，其中包含了 increment 和 decrement 的 reducers，并且通过 export 导出了这些 action creators。

1. 创建 store：

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

export default configureStore({
  reducer: {
    counter: counterReducer
  }
});

在上面的代码中，我们使用 configureStore 函数创建了一个 Redux store，并将 counterReducer 添加为 reducer。

1. 使用 store：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

在上面的代码中，我们将 store 作为 props 传递给 Provider 组件，并将整个应用包裹在 Provider 组件中，这样整个应用就可以使用 Redux store 了。

上面是 Redux Toolkit 的基本使用流程，相较于原始的 Redux 开发方式，Redux Toolkit 简化了很多复杂的操作，提高了开发效率。