1、为啥要用redux

1、JavaScript开发的应用程序，已经变得越来越复杂了:

• JavaScript需要管理的状态越来越多，越来越复杂;
• 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中， 是否显示加载动效，当前分页;

2、管理不断变化的state是非常困难的:

• 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化。
• 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪。

3、React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理

• 无论是组件定义自己的state，还是组件之间的通信通过props进行传递;也包括通过Context进行数据之间的共享
• React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定;

4、Redux就是一个帮助我们管理State的容器:Redux是JavaScript的状态容器，提供了可预测的状态管理

2、Redux的核心理念

2.1、Store

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

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

3.2、State

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

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

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。

3.3、Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。

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

3.4、Action Creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');

3.5、store.dispatch()

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

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

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。

store.dispatch(addTodo('Learn Redux'));

3.6、Reducer

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

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

3.7、store.subscribe()

store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

unsubscribe();

3.8、redux的实现

import redux from 'redux'
const initialState = {
    counter: 0
}

function reducer(state = initialState, action) {
    switch(action.type) {
        case "INCREMENT":
            return {...state, counter: state.counter + 1};
        case "DECREMENT":
            return {...state, counter: state.counter - 1};
        case "ADD_NUMBER":
            return {...state, counter: state.counter + action.num};
        case "SUB_NUMBER":
            return {...state, counter: state.counter - action.num};
        default:
            return state;
    }
}

const store = redux.createStore(reducer)
store.subscribe(() => {
    console.log("store" + store.getState().counter)
})

const action1 = {type: "INCREMENT"};
const action2 = {type: "DECREMENT"};
const action3 = {type: "ADD_NUMBER", num: 5};
const action4 = {type: "SUB_NUMBER", num: 12};

store.dispatch(action1)
store.dispatch(action2)
store.dispatch(action3)
store.dispatch(action4)

3、Redux总结

13.1、Redux的三大原则

1、单一数据源
1）、整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中
2）、Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护
3）、单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改
2、State是只读的
1）、唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State
2）、这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state
3）、这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition(竟态)的问题
3、使用纯函数来执行修改
1）、通过reducer将 旧state和 actions联系在一起，并且返回一个新的State
2）、随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分
3）、但是所有的reducer都应该是纯函数，不能产生任何的副作用

3.2、Redux原理图

redux官方图片
redux流程图