Redux Toolkit的学习_02

使用Redux模板：配置了标准的 Redux 应用程序结构，使用 Redux Toolkit 创建 Redux store 和逻辑，以及 React-Redux 将 Redux store 和 React 组件连接在一起。

npx create-react-app redux-essentials-example --template redux

构成此应用程序的关键文件

    /src
        index.js: app 入口
        App.js: 顶级 React 组件
        /app
            store.js: 创建 Redux store 实例
        /features
            /counter
                Counter.js: 展示 counter 特性的 React 组件
                counterSlice.js: counter 特性相关的 redux 逻辑

我们的应用程序可能由许多不同的特性组成，每个特性都可能有自己的 reducer 函数。当我们调用configureStore 时，我们可以传入一个对象中的所有不同的 reducer。

counterSlice.js 的文件，它为计数器逻辑导出了一个 reducer 函数。 我们可以在此处导入 counterReducer 函数，并在创建 store 时包含它。

{counter: counterReducer}表示在 Redux 状态对象中有一个 state.counter 部分，并且我们希望每当 dispatch action 时 counterReducer 函数负责决定是否以及如何更新 state.counter 部分。

app/store.js

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

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