Redux 工具包和文件夹结构

Redux 是一个用于 JavaScript 应用程序中的可预测状态容器。它可以帮助我们管理应用程序的所有状态，并提供了一组 API 来管理这些状态。Redux 工具包和文件夹结构可以让我们更加有效地组织 Redux 应用程序的代码，并提高代码的可读性和可维护性。

Redux 工具包

Redux 工具包是一个用于快速开发 Redux 应用程序的集合。它包括了一系列 API 和中间件，用于简化 Redux 应用程序的编写过程。其中最常使用的 API 包括：createStore、combineReducers 和 applyMiddleware。

createStore

createStore 是 Redux 中最重要的 API 之一。它用于创建存储应用程序状态的 Redux store，而 store 则是一个包含了所有应用程序状态的对象。在 createStore 中我们需要传入一个 reducer 函数，该函数用于定义应用程序的初始状态和如何根据 action 对状态进行修改。

import { createStore } from "redux";

const reducer = (state = {}, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1
      };
    case "DECREMENT":
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

combineReducers

在 Redux 应用程序中，我们通常会定义多个 reducer 来管理不同部分的状态。combineReducers 用于将多个 reducer 合并成一个，从而便于管理 Redux 应用程序的状态。

import { combineReducers } from "redux";

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1
      };
    case "DECREMENT":
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  counter: counterReducer
});

const store = createStore(rootReducer);

applyMiddleware

applyMiddleware 用于添加中间件到 Redux 应用程序。这些中间件可以用于拦截和处理 action，从而实现异步操作、日志记录、数据埋点等功能。常用的中间件包括：redux-thunk 和 redux-saga。

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

const reducer = (state = {}, action) => {
  // ...
};

const store = createStore(reducer, applyMiddleware(thunk));

文件夹结构

正确的文件夹结构可以帮助我们更好地组织 Redux 应用程序的代码。以下是一个常用的文件夹结构：

├── src/
│   ├── actions/
│   │   ├── index.js
│   │   └── ...
│   ├── components/
│   │   ├── App.js
│   │   └── ...
│   ├── reducers/
│   │   ├── index.js
│   │   └── ...
│   ├── store/
│   │   └── configureStore.js
│   └── index.js
├── test/
├── package.json
├── README.md
└── ...

其中，actions 文件夹用于存放 dispatch 的 action，reducers 文件夹用于存放 reducer，components 文件夹用于存放 React 组件，store 文件夹用于存放 Redux store 的配置文件，index.js 文件用于应用程序的入口。

actions

在 actions 文件夹中，我们通常将每个 action 存放在一个单独的文件中，并通过 index.js 导出所有的 action。

// actions/increment.js
export const increment = () => ({ type: "INCREMENT" });

// actions/decrement.js
export const decrement = () => ({ type: "DECREMENT" });

// actions/index.js
export * from "./increment";
export * from "./decrement";

reducers

在 reducers 文件夹中，我们通常将每个 reducer 存放在一个单独的文件中，并通过 index.js 导出所有的 reducer。

// reducers/counter.js
const initialState = { count: 0 };

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        count: state.count + 1
      };
    case "DECREMENT":
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
};

// reducers/index.js
export * from "./counter";

store

在 store 文件夹中，我们通常将 Redux store 的配置文件存放在一个单独的文件中，并通过 index.js 导出所有的 store。

// store/configureStore.js
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { counterReducer } from "../reducers/counter";

const rootReducer = combineReducers({
  counter: counterReducer
});

export const store = createStore(rootReducer, applyMiddleware(thunk));

// store/index.js
export * from "./configureStore";

通过上述文件夹结构，我们可以更好地组织 Redux 应用程序的代码，并提高代码的可读性和可维护性。