关于redux的一些理解
26 May 2017redux
redux 简单理解是生成一个状态机，一个web 应用就是一个状态机，所有状态保存在一个对象里，redux生成的store就是这个对象
redux的createStore 生成的 store 对象有三个方法
- store.getState()
- store.dispatch()
- store.subscribe()
createStore 接受的第一个参数是一个reducer, reducer函数接受两个参数 state和action, reducer是一个纯函数，接受一个state对象和action, 生成一个新的state
createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。
用户通过 store.dispatch(action), 传入action 来 触发视图更新，store.dispatch 内部会自动触发 store.subscribe(fn)(传入函数，该函数是监听state变化时要执行的函数)
createStore内部实现原理
const createStore = (reducer) => {
let state;
let listeners = [];
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
};
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
}
};
dispatch({});
return { getState, dispatch, subscribe };
};
redux-thunk
redux 的 store.dispath 通常是接受一个action 对象，使用 redux-thunk 中间件可以对 store.dispath 进行改造使其可以接受一个函数作为参数，而该函数本质是一个action的生成器，可以在该函数里做异步操作，以primse为例,先pedding（触发action),等异步结束后，根据结果 resolve 或 reject ，生成相应的触发 action，因此异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator(该函数接受两个参数，dispath 和 getState)，然后使用redux-thunk中间件改造store.dispatch。
redux-promise
redux-thunk 是让 store.dispath 接受一个 Action Creator 的函数，而 redux-promise 则是返回一个 promise 对象，即 使得store.dispatch方法可以接受 Promise 对象作为参数。
react-redux
React-Redux 将所有组件分成两大类：UI 组件 和 容器组件。 UI组件只负责展示，是个纯组件，只接受props参数，没有state状态。 容器组件恰恰相反，使用rudux 主要负责数据管理和逻辑
react-redux 提供的 connect 方法就是讲UI组件包装成容器组件，connect 接受两个参数 mapStateToProps 和 mapDispatchToProps，返回一个新的函数，该新函数接受 UI组件为参数，最终生成一个容器组件，代码如下：
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
mapStateToProps
mapStateToProps是一个函数，接受state作为参数(还可以使用第二个参数，代表容器组件的props对象)，最终返回一个对象，里面的键值对就是一个映射。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。 mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
mapDispatchToProps
mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。该参数可以是一个函数也可以是一个对象。
如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}
Provider
connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。为了避免从父组件向子组件一级一级传递state，React-Redux 提供Provider组件，它的原理是React组件的context属性
(实例代码)[https://github.com/jackielii/simplest-redux-example/blob/master/index.js]