Redux组件库

Redux 状态管理的组件库，当我们遇到某个组件的状态需要共享，某个状态需要在任何地方都可以拿到，一个组件需要改变全局状态，一个组件需要改变另一个组件的状态时，Redux是我们不二选择，下面开始Redux的简单学习。

Redux工作流程

1.const store = createStore(myApp); //创建一个store容器来保存数据

2.store.dispatch(action); //用户发出 Action

3.let nextState = todoApp(previousState, action); //Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State

4.store.subscribe(listener); //State 一旦有变化，Store 就会调用监听函数

5.listener监听函数做处理。

store

Store 就是保存数据的地方，可以看成一个容器。整个应用只能有一个 Store。Redux 提供createStore这个函数，用来生成 Store。

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

sore.dispath()是view发出Action的唯一方法。
store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

state

state对象包含所有数据,它是Store某一时刻的数据，当前时刻的 State，可以通过store.getState()拿到

import { createStore } from 'redux';
const store = createStore(myApp);
const state = store.getState();

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。创建Action：

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo('Learn Redux');

Reducer

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。Reducer 纯函数是函数式编程的概念，所以不能改写参数，不能调用系统I/O的API，不能调用Date.now()或者Math.random()等方法，因为每次会得到不一样的结果。

const reducer = (state , action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};
const state = reducer(1, {
  type: 'ADD',
  payload: 2
});