react 中redux的使用

redux 介绍：
Redux 的适用场景：多交互、多数据源

Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。

Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）。

redux 是一个范用的状态管理框架

主要是解决了组件间状态共享的问题，原理是集中式管理

流程：

 view 发出行为--->action处理--->给store，store.dispatch的方法，reducer用来处理action的数据（返回最新的state），store.subscribe进行监听

redux和flux的区别：

Redux和Flux很像。主要区别在于Flux有多个可以改变应用状态的store，它通过事件来触发这些变化。组件可以订阅这些事件来和当前状态同步。

Redux没有分发器dispatcher，但在Flux中dispatcher被用来传递数据到注册的回调事件。另一个不同是Flux中有很多扩展是可用的，这也带来了一些混乱与矛盾

在redux当中只能定义一个可以更新状态的store
 flux可以定义多个仓库
redux把store和Dispatcher合并,结构更加简单清晰
新增state,对状态的管理更加明确

redux和vuex的区别：

vue改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch,只需在对应的mutation函数里改变state值即可
由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可

redux的优点：

redux把流程规范了，统一渲染根节点虽然对代码管理上规范了一些,只要有需要显示数据的组件，当相关数据更新时都会自动进行更新。减少手动编码量，提高编码效率。

redux的缺点：

一个组件所需要的数据，当相关数据更新时，组件要重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

redux的基本知识点：

使用需要安装： npm install redux -D

redux中有三个基本概念，Action，Reducer，Store。
store 仓库
	维持应用的 state；
	提供 getState() 方法获取 state；
	提供 dispatch(action) 方法更新 state；
	通过 subscribe(listener) 注册监听器。

action 中发送过来的对象 必须有一个type属性
reducer 他是一个纯函数  他会跟action发送过来的type类型做逻辑上的处理（使用switch方法进行判断）

redux的核心API

引入必要组件：
import { createStore} from 'redux';

生成store：
const store = createStore(reducer,  state初始状态[可选]);

取得当前时刻的state：
const state = store.getState();

发出action
store.dispatch({
  type: 'ADD_TODO',
  text: 'Learn Redux'
});
设置监听函数：
store.subscribe(callback);

Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。

约束：
不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果


Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。

// State 是一个对象
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

redux的使用步骤

redux 使用总结

在redux中没有顶层容器和视图，用户触发数据更改---给action 处理（调用自身的方法），
处理的结果给---store ,store创建reducer对象去处理并返回最新状态数据，
返回数据后---->给view 进行更新（Store.getState()获取最新数据）