1.为什么使用redux：

我们在开发一个小的项目时逻辑层比较简单，组件间的传值只是简单的父子结构或者兄弟结构。但是随着项目体积不断的扩张，js需要管理很多的state。由于多层结构之间都互相依赖的关系，动一个state其他的state可能会发生不可预知的变化，所以state的管理非常的困难。我的理解就是redux是一个仓库把需要管理的状态放入这个仓库进行统一管理。

2.redux理解：

举个栗子：
这是一个普通对象的state

{
    todos: [{
      text: 'Eat food',
      completed: true
    }, {
      text: 'Exercise',
      completed: false
    }],
    visibilityFilter: 'SHOW_COMPLETED'
  }
  

它没有setter。其他的代码不能随意的去修改它
如果想要去更新state中的数据，我们需要发起一个action：

  { type: 'ADD_TODO', text: 'Go to swimming pool' }
  { type: 'TOGGLE_TODO', index: 1 }
  { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了，就可以知道为什么变。action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。

function visibilityFilter(state = 'SHOW_ALL', action) {
    if (action.type === 'SET_VISIBILITY_FILTER') {
      return action.filter;
    } else {
      return state;
    }
  }
  
  function todos(state = [], action) {
    switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }]);
    case 'TOGGLE_TODO':
      return state.map((todo, index) =>
        action.index === index ?
          { text: todo.text, completed: !todo.completed } :
          todo
     )
    default:
      return state;
    }
  }

再开发一个 reducer 调用这两个 reducer，进而来管理整个应用的 state：

  function todoApp(state = {}, action) {
    return {
      todos: todos(state.todos, action),
      visibilityFilter: visibilityFilter(state.visibilityFilter, action)
    };
  }

3.基本的API

1.store
Store 就是保存数据的地方，可以把它看成一个容器。整个应用只能拥有一个Store。
redux提供createStore来生成Store。
import { createStore } from ‘redux’;
const store = createStore(fn);
2.state
Store对象包含所有数据。如果想要得到某个节点的数据，可以通过store.getState()拿到对应节点的数据。
const state = store.getState()
3.action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

const action = {
    type: 'ADD_TODO',
    payload: 'Learn Redux'
  };

Action是一个对象。其中type属性是必须的代表action的名称。其他属性可以自主设置。
我们可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
4.action creator
定义一个函数来生成cation，避免手写action

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

这里addTodo就是一个cation creator
5.store.dispatch()
store.dispatch()是view发出action的方法

import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

这里把action作为参数发送
结合action create 来使用 store.dispatch(addTodo(‘*******’))
6.store.subscribe()
Store 可以使用store.subscribe 方法设置监听函数，一旦state发生变化则自动执行这个监听函数。

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

store.subscribe(listener);

我们可以把应用于视图更新如：setState或者render方法放入listen，实现view的自动渲染。（store.subscribe方法返回一个函数，调用这个函数就可以解除监听）

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

4.redux 基本工作流程

用户发出action:store.dispatch(action)->store 自动调用reducer：todoApp(preState,action)->state变化,store就会调用监听函数store.subscribe(listener)

5.redux 中间件

因为reducer是一个纯函数无法进行读写操作，不能承担其他功能。
所以要在发送action之前的store.dispath（）方法，添加功能。
中间件就是一个函数，对store.dispatch（）方法进行了改造，在发出action和执行reducer两步之间，添加了其他功能。

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  applyMiddleware(logger)
);

redux-logger提供生成器create
Logger，可以生成中间件logger然后将它放在applyMiddleware方法之中，传入create
Store方法，就完成了store.dispatch（）功能增强
applyMiddlewares（）
是redux的原生方法，将所有中间件组成一个数组，依次执行。