Redux 工具链

使用 Create-React-App 的官方 Redux 模板 创建一个React+Redux应用。

xxxxxxxxxx
npx create-react-app my-react-redux-app --template redux

提示：

创建好的应用已经自动包含了Redux Toolkit，React-Redux，Redux DevTools

Redux Toolkit用来创建 Redux store 和逻辑。

React-Redux 将 Redux store 和 React 组件连接在一起。

创建好的应用的关键文件：

• /src

  • index.js: app 入口

  • App.js: 顶级 React 组件

  • /app

    • store.js: 创建 Redux store 实例

  • /features

    • /counter

      • Counter.js: 展示 counter 特性的 React 组件
      • counterSlice.js: counter 特性相关的 redux 逻辑

src/app/store.js

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

//调用@reduxjs/toolkit工具库里面的configureStore方法来创建应用的Store
export const store = configureStore({
  //需要传入reducer
  reducer: {
    //它表示我们将counterReducer中的state跟reducer都给到了Store，
    //将来我们可以通过访问state.counter(counter就是key名)来访问对应的数据状态
    //将来dispatch action 的时候，counterReducer 函数负责决定是否以及如何更新 state.counter 部分
    counter: counterReducer,
  },
});

提示：

我们的应用程序可能由许多不同的功能模块组成，每个模块都可能有自己的 reducer 函数。当我们调用configureStore 时，我们可以传入所有不同的 reducer。 reducer对象中的键名 key 将决定最终状态树中的键名。