React+Redux应用_Store

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

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

  提示：

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

  Redux Toolki用来t创建 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 将决定最终状态树中的键名。