redux

1.redux适用场景

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

2.redux设计思想

web应用是一个状态机，视图与状态是一一对应的。

所有的状态，保存在一个对象里面

3.Store

Store保存数据的地方，是一个容器，整个应用只能有一个store Redux提供CreateStore这个函数，用来生成store

4.State

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。

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

const state = store.getState();

5.Action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。
const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};
Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。

store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。


const reducer = function (state, action) {
  // ...
  return new_state;
};

6.redux 工作流

首先用户发出Action

store.dispatch(action);

然后，Store自动调用Reducer,并且传入两个参数：当前的state和收到的Action.  Reducer会返回新的State

let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}