企业级 Redux 应该怎么用--结构篇

前言

  最近做项目，发现好多同事对于 Redux 只会照猫画虎，看着原先的代码，可以增加，但是要自己写的时候，就很懵，完全不知道怎么下手。本篇文章，就针对这种情况，做一个整理，希望能帮助各位同学更清晰的了解到 Redux 。

一、项目结构

  首先带大家了解一下项目结构，这对于 redux 的学习和部署非常重要，项目结构的产生，也是前端模块化思想的产物，不仅有利于开发，更利于维护。有很大一部分项目夭折，都是因为维护太难，前面开发的代码看不懂，后面开发的人越做越受气。

  首先每个项目的外层，都是类似以下这种模式

1. src文件夹 ，这个是用来存放我们编码的地方，代码会按照模块的不同，由一个一个文件夹组成，一个文件夹，就是一个完整页面，每个独立的模块都会有自己独立的 redux 。
2. config-overrodes.js 这个文件夹里面会配置我们的入口路径，模板入口等。
3. package.json 这个文件是我们模块引用的各种插件的配置文件，可以理解为产品的说明书，记录了各种依赖包的版本信息。
4. package-lock.json 这个文件是可以锁定我们安装的版本，对于上面的文件来说
5. webpack.config.js 这个是 webpack 的配置文件，记录了我们代码的打包规则。

  接下来是 src文件夹下面的内容。

  一个文件夹就是一个模块，一个模块就是一个独立完整的页面。

  接下来是本文的重点，模块内部的结构，如下图所示。

1. 上面红色框的 DemoItem 是我们各个组件存放的地方，稍后我们详细说明。
2. Images 顾名思义，这个项目用到的图片都放在这里面。
3. redux文件夹 ，顶层 redux 这个里面存放了整个项目的 redux 配置。
4. utile文件夹 ，里面一般存放一些项目数据的对应关系，比如页面需要中英文双语的时候，这个里面存放的就是各个地方的中英文对照关系。
5. index.js 是项目的入口文件，这个里面会配置 redux 的 store ， 细节如下

import React from "react";
import ReactDOM from "react-dom";
import configureStore from "./redux/configureStore";//从顶层redux中获取各个reducer的集合
import { Provider } from "react-redux";
import App from "./DemoItem/main";
import { LocaleProvider } from "antd";
import registerServiceWorker from "./registerServiceWorker";

const store = configureStore(); //创建一个store

ReactDOM.render(
  <LocaleProvider>
    <Provider store={store}> //把store作为一个属性，放到顶层元素中
      <App />
    </Provider>
  </LocaleProvider>,
  document.getElementById('root')
);
registerServiceWorker();

6. registerServiceWorker.js 这个文件是 react脚手架工具自带的，做离线缓存的文件，有兴趣的同学可以看看源码，一百多行，也比较容易理解。

二、顶层redux

  重点来了，我们看一下 顶层 redux 中，到底怎么配置。首先看一下文件夹里都应该有哪些文件。

  顶层 redux 中，主要功能不是数据交互，而是把各个组件的 reducer ，合并到一起，导出出去，供 store 使用。其中有三个 configureStore 开头的配置文件（熟悉英语真的很占优势，英语好的同学估计一看这三个文件的名字就知道是干什么的了），分别记录了在生产环境下（prod）和开发环境下（dev）的不同配置，中间的 configureStore.js 是用来判断到底是哪种环境的。

  上面那个 middleware 文件中的 api.js 文件，是 redux-thunk 的中间件配置区域，中间件这个东西可以理解成一个安全环境，我们可以把接口调用放到这个环境中，在这个环境里调用接口，返回数据后直接存到 store 里面，页面用的时候，去 store 里面取用。

   问题来了，为什么要绕一圈通过中间件去调用呢？直接调接口不行吗？

  当然可以，但是使用中间件更安全，且更容易维护，效率更高，举个例子，我们调用接口，返回来的数据在正常情况下格式是固定的，这个时候你可以随便取用里面的数据，但是万一返回的数据结构变了，取用的时候就会报错，如果界面没做处理，就会直接显示错误，如果用户碰到了就会直接白屏。

   问题又来了，那我取用数据的时候做个校验不就行了？

  没问题，但是如果返回的数据结构很复杂，对象套数组，再套对象，每一次获取数据的时候都要做个判断，是不是数组，有没有属性，代码就会显得很冗余，可读性很差。

  在中间件中效果就不同了，如果接口返回的数据异常，那这个就不会存入store中，或者即便存入进去，当有的属性不存在时， store 中也有默认值补上。这样界面不会动不动就白屏，会特别友好。

三、组件中的redux

  组建中的 redux 就只要负责数据传输就行了， 具体的项目结构如下：

  组件里面会有一个主入口， main.js 这个文件里面会放一些路由的相关配置，用来控制显示不同组件，一般情况，我们不在 main.js 的这一层级设置 redux ，这一层基本不太需要数据间的交互，同时也是为了功能区分明确，这个只是个入口，具体数据要到各个组件中去。

   Component 文件夹就是我们存放组件的地方了，会按照功能分别存放。

  这里我就放了两个组件，是数据查询组件，负责数据查询时的入参选择，还有一个是数据展示组件，用来渲染查询到的数据。

  数据查询组件里面，结构如上图所示，最下面的 DataQuery.jsx 是该组件的编码的地方，上面的 Controls 是数据查询组件里如果还细化了一些小组件的时候，存放的地方，比如数据查询有时间选择的组件，有地点选择的组件。

  中间的 redux 则是我们重点关注的地方。请看下图：

  这个 redux 中，就是我们熟悉的， redux 正常数据传输时候的结构了，页面触发 action ，然后 action 通过 reducer 把数据存入 store 中。值得注意的是，中间那个 actionMiddleware.js 就是我们上文提到过的中间件，接口调用就可以写在这个里面。

  同理，另一个组件 DataShow 中的布局结构也类似上面，这里就不展示了。

四、项目结构分析

  帮大家理个思路，完整的看一下项目结构，整体的内容。

  本节帮大家梳理了一下企业级开发时，项目结构的具体划分，下一节，我们一起来学习下，在这种项目结构中， redux 该如何部署-跳转点这里。各位乡绅，都看到这里了，点个赞👍再走吧