安徽省干部建设教育网站培训网址
1、Redux概述
Redux 是一个用于 JavaScript 状态容器，提供可以预测的状态管理
Redux 可以让我们的构建一致化的应用，运行于不同的环境，客户端、浏览器、服务器，并且易于测试；
Redux 除了和React一起使用，还支撑其他界面库，并且体检很小，只有2kb
2、Redux 的设计初衷
随着js单页面开发应用的日益复杂，js需要管理的数据 状态会越来越多，并且这些数据状态有很多是服务端提供的，还有自己本地缓存的、本地生成没有持久化到服务端的数据，以及UI视图渲染的数据等等；
那么我们怎么才能更好的在不同的页面之间进行通讯管理数据呢？
其实，不使用 Redux 依然可以处理不同页面之间的数据通讯，但是 使用Redux 处理这些多页面，跨页面负责的数据状态管理，会更方便一些；
3、Redux 的三大核心
3.1、单一数据源；
整个应用的State 被存储在一个 Object tree 中，并且这个 Object tree 只存在于唯一的 store 中；
3.2、state 是只读的；
唯一修改state 的方法只能是触发 action，action是一个用于描述已发生事件的普通对象；
这样是为了 保证视图操作，网络请求数据变更，不能直接去修改 state，只能表达 他们将要修改state的意图，通知 action 函数，去集中处理，并且严格按照先后顺序一次执行；
store.dispatch({type:'MIN',num:2
})
3.3、使用纯函数来执行修改；
为了描述 action 如何改变 state tree，我们需要编写一个 reducers
Reducers 只是一些纯函数，它接收先前的state 和 action ，并且返回新的 state，
纯函数的特点：可以复用，可以控制执行顺序，可以传入附加参数；
4、Redux 的组成
4.1、State 状态
状态其实就是我们开发过程中页面之间传递的数据，大致分为以下三种
服务端返回的state，如：用户信息，列表详情
当前组件的状态 state，如：决定按钮现隐、组件之间切换的
全局控制的 state，如：路由导航守卫时候的信息状态，主题色的变更
4.2、Action 事件
action 是将数据从应用层 传递到 store 的载体，是 store的唯一数据源；通过 store.dispatch() 将 action 传递给 store
特点：
本质是一个js对象
必须包含 type 属性，多为常量，用于区分唯一性；
其他属性数据结构，可以视具体需求自定义；
只描述了有事情将要发生，并没有描述如何去更新 state；
// action
{type: 'USER_INFO',useInfo:{name: 'Adny',age: 18,job: '专业搬砖'}
}
更多的时候是使用 action 创建函数
function userInfo() {return {type: 'USER_INFO',useInfo:{name: 'Adny',age: 18,job: '专业搬砖'}}
}
4.3、Reducer
本质是一个纯函数
响应发送过来的 action
函数接收两个参数，第一个是初始化的 state，第二个是发送过来的 action
必须要有 return 返回值；
const initState = {...}
const useInfoReducer = (state=initState, action) => {return {....}
}
4.4、Store
如上图 store 用于将 action 和Reducer 关联到一起；
通过 createStore 来构建 store
维持应用的 state
提供 getState() 来获取 最新的state
通过 subscribe() 来注册监听 state
通过 dispatch() 来发送action
通过 subscribe() 返回值来注销监听
import { creatStore } from 'redux'
const store = createStore('传递reducer')
store.dispatch({/*需要执行的逻辑**/})