Redux(一) -- redux的使用及其工作原理

前言：

在我们使用react进行开发时，管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。

所以我们需要把 state 进行统一管理，这样才能控制每一个state的变化，让我们的程序可读性更强，出错率更低。

---

一、什么是Redux？

Redux 是一个 JS 库，一个状态容器。

作用： 集中式管理 React 应用中 多个组件共享的状态

（1）它可以和 react，vue，angular 等一起使用，但一般都和 react一起使用 。
（2）Redux 可以 解耦 React（View层）于数据管理和对数据的操作，保持View层的纯净，
	让每一个组件的职责划分更加清楚，同时又降低了React数据传递的难度和不可控性
（3）Redux 采用了中间件机制，既保证了代码的简洁，又增加了可扩展性。

Redux的三大原则：

（1）单一数据源

整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中

（2）State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

（3）使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

下面就让我们来一步步解析Redux的工作原理，以及关键功能。

二、Redux的工作原理

Redux关键功能解析：

1.Store：集中状态管理中心

（1）store就是保存数据的地方，当有数据改变时，store会调用reducer进行处理，完事后通知View层调用getState更新
（2）Redux提供createStore这个函数，用来生成Store，内部接收reducer

import {
   createStore} from 'redux'
const store=createStore(reducer);

2.View层：由组件构成视图层

（1）接收数据时，调用getState( )接收Store的newState，并重新渲染更新视图
（2）用户操作时，通过事件触发制造action并派发 来通知Store来更新state

// 接收 State
const state=store.getState()

3.ActionCreator：一个工厂函数，负责产生action对象

（1）与View层的事件进行关联，一旦有通知就制造action对象
（2）action = {  
		type: action类型,
		data: 事件携带的数据（可有可无）
	}

const action={
   
  type:'ADD_TODO',
  payload:'redux原理'
}

在上面代码中，action的名称是ADD_TODO，携带的数据是字符串‘redux原理’，action描述当前发生的事情，这是改变state的唯一的方式 ( 通过action传值 )。

4.dispatch：派发action，方法使用了中间件机制

（1）store.dispatch()是view发出Action的唯一办法
（2）store.dispatch接收一个action作为参数，将它发送给store来通知 store调用reducer改变state。
（3）dispatch 时，还可以在中间插入副作用操作（网络请求等），其内部会调用中间件进行处理

const action={
   
  type:'ADD_TODO',
  payload:'redux原理'
}
store.dispatch(action)
// 或者直接
store.dispatch({
   
  type:'ADD_TODO',
  payload: