前言

我先前一直用的是ant design集成的管理后台进行开发项目，也没有好好的去理解里面的数据是怎么走的，它是通过什么语言集成的，这几天项目不是很忙，所以我进行一下总结。

Ant design

这个系统其实做的很完美，但是依赖包很多，这里推荐一个适合小型项目开发的管理平台，跟ant design相似，但是它没有集成很多依赖包。https://segmentfault.com/a/1190000009379222

Redux(具体中文说明看我的另一篇博客 redux理解https://blog.csdn.net/lydia_love/article/details/104353605)

安装：npm install --save redux

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 state 的办法是触发 action，一个描述发生什么的对象。为了描述 action 如何改变 state 树，你需要编写 reducers。
白话文就是：在你的项目中，你页面上的数据state(一般页面上的数据都会用state表示)其实都是放在一个仓库里面store，我们现在所做的页面已经不是那种静态页面了，所以现在页面上的数据会有一些渲染和改变，但是不能直接改变state中，我们要触发action对象，我们让action去改变，但是怎么改变呢？改成啥样之类的，就得在reducer中进行记录。
Redux主要是action——reducer——store这三者之间进行关联。
中文官方网址：https://www.redux.org.cn/docs/introduction/CoreConcepts.html

Action
Action是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

当项目中有很多action文件的时候，就可以创建一个ActionTypes文件进行统一管理这个action。

ActionTypes.js 这个是定义action中变量的名称
action.js文件：
在这里插入图片描述
除了 type 字段外，action 对象的结构完全由你自己决定,其它的都是自己定义或者从页面上传值过来的。
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的， actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

2 .Reducers

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
(previousState, action) => newState
第一步是要把action文件引入进来，毕竟是要描述store中的数据变化
在这里插入图片描述
第二步就是可以设置初始值。若是刚开始进来时没有数据，就可以把初始值赋给你所想要赋的值。

import { VisibilityFilters } from './actions'

const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
};

function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }

  // 这里暂不处理任何 action，
  // 仅返回传入的 state。
  return state
}

第三步就是对数据进行处理，有一个combineReducers(reducers)函数，combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore 方法。
在这里插入图片描述