Redux
一、作用
方便管理页面状态(State)。
主要成员：Store、Reducer、Action、
二、Reducer
作用：
- 定义 state 的结构
-
监听store.dispatch 触发的 action.type，更新store中相应的state。
一般情况下，我们使用es6的结构赋值，把子state的名字定为子reducer的名字。
一）、Reducer函数接受两个参数：state,action，返回一个新的state。
注意：
1、整个应用只有一个由多个子reducer经过Redux.combineReducers整合后的单一的 reducer 函数
2、不要在 reducer 中有 API 调用
3、####每个子reducer在case到相应的action后的返回值中，不要改变state原有结构！！！！####
详见：http://cn.redux.js.org/docs/Glossary.html#store-enhancer
二）、Reducer函数执行要点
- reducer 第一次被调用的时候，state 的值是 undefined,可以用es6的默认参数的方式解决。
- reducer 需要在 action 传入之前提供一个默认的 state 来处理这种情况。
- reducer 需要当前的 state 和 dispatch 的 action 来决定需要做什么事。
- 假设需要更改数据，应该用更新后的数据创建新的对象或数组并返回它们，及所谓的
纯函数，不对传入的state做任何修改。 - 如果没有什么更改，应该返回当前存在的 state 本身。
//注意reducer case到某一个action后，只能更改state中的某个key的值，但是不能更改state的结构
###1、假设state结构如下：
const defaultState = {
name : 'Diana',
age : '16',
sex : 'girl',
books : []
}
function searchList(state = defaultState, action) {
switch (action.type) {
case 'GROW_UP':
return {
//利用es6的结构赋值，现将原有的state结构结构出来，下面再用新的值来替换。
...state,
//利用GROW_UP action 返回的新年龄替换默认state中的年龄，而不改变现有结构
age : action.newAge
};
case 'READ_BOOK':
return {
...state ,//老规矩
books : [...state.books,...action.newBooks]
};
default: return state;
}
}
三）、reducer 和 action的关系
1、reducer 可以理解为一个action.type的监听器，监听各种类型的action，然后返回相应的state。
2、action 可以理解为reducer监听的各种type，然后由 dispatch 来进行触发。
3、dispatch某一个action以后，dispatch函数内部会轮流调用被combineReducers的所有reducer，如果匹配到给定的action.type,则返回相应的state.
也就是说，如果有两个reducer，case相同的action.type,那么他俩都会被改变。所以设置action.type的时候一定要注意别重复了。
我们从二者的结构可以看出来：
reducer.js
ruduer 函数会接受 state,action为参数，然后 case(监听)各种不同的 action.type，以更新state树。
action.j
action创建函数接收state值，或其他一些条件，然后返回某一个type和更新以后的state，最后通过dispatch(action)函数来触发，这样reducer就会监听到对应的action.type,然后修改state树。
三、Action
作用：接收某些参数，进行某些处理，然后通过dispatch触发相应的reducer进行store中state的更改。
- 同步处理：然后返回一个含有type和新state的对象，传给store.dispatch;
- 异步请求接口 借助Redux-thunk创建thunk函数，然后直接传给dispatch。
同步Action返回一个对象；
异步Action返回一个接收store.dispatch 和 store.getState 两个参数的函数。
//同步Action
export function invalidatesubreddit(subreddit) {
return {
type: INVALIDATE_SUBREDDIT,
subreddit
}
}
//异步Action
export function fetchPostsIfNeeded(subreddit) {
// 注意这个函数接收了 getState() 方法,它让你选择接下来 dispatch 什么。
// 当缓存的值是可用时，减少网络请求很有用。
return (dispatch, getState) => {
if (shouldFetchPosts(getState(), subreddit)) {
// 在 thunk 里 dispatch 另一个 thunk！
return dispatch(fetchPosts(subreddit))
} else {
// 告诉调用代码不需要再等待。
return Promise.resolve()
}
}
}
四、Store
作用：存储应用中的所有state。
- 提供
getState()方法获取 state； - 提供
dispatch( action)方法更新 state； - 通过
subscribe(listener)注册监听器; - 通过
subscribe(listener)返回的函数注销监听器。
注意： Redux 应用只有一个单一的 store。
一）、创建方式
const store = createStore(rootReducer);
二）、applyMiddleware
为Redux注入中间件，其中最常用的如：Redux-thunk，让我们可以在Action中使用异步请求。
三）、combineReducers
把多个子reducer合并成一个根reducer，用于createStore(rootReducer)。
const rootReducer = combineReducers({
defaultState, // key 的名称和 default export 的名称一样
firstState : firstNamedReducer, // key 的名字是单独取的，而不是变量的名字
secondState, // key 的名称和已经被重命名过的 export 的名称一样
});
四）、bindActionCreators
把Action creators转成拥有同名 keys 的对象，再使用
dispatch把每个 Action creator 包围起来，这样可以直接调用它们。该函数一般与
react-redux的connect一起连用。见：React-Redux
bindActionCreators({
login,
setLoginFormData,
hideLoginError,
jumpTo,
loginFail,
...epassportActions,
}, dispatch);
推荐阅读