Redux

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

http://cn.redux.js.org/docs/api/applyMiddleware.html

也参考《深入React技术栈》

Redux是Flux的实现，或者说Redux参考了Flux的设计。Redux是一个包，提供了一些api让我们方便创建store、更新数据等，简化我们的操作。

Flux解决了MVC的局限性，Redux也遵循Flux的这个特点，所以使用Redux的原则就是一个应用的数据都存放在单一的数据源Store中（太大的话可以通过combineReducers来进行拆分），这解决了MVC 多个model，数据流混乱的问题，而且单个数据源的话，方便持久化。

在Flux中，要求store是只读的（只允许内部对store进行修改），也就是没有给外界提供setter方法，在Redux中，更加发扬这种只读的特性，修改状态都是在reducer中返回一个全新的state，而不会对原来的state进行修改

Redux = Reduce + Flux。所以在Redux中对这两者的理解十分重要

重申一下redux和flux在应用上的区别：

　　redux：调用storeA.dispatch，storeA中的reducer会被触发执行，而storeB中的reducer不会执行。

　　Flux：调用Dispatcher.dispatch方法，所有store在上面register的方法都会执行

因为store中的state代表整个应用程序的状态，而修改state，必须通过dispatch(Action)来实现，也就是说每次改变对应一个action，只需要跟踪action，即可跟踪整个程序的状态变化

Store

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

在View中调用dispatch发送action

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

// 使用Action Creator
store.dispatch(addTodo('Learn Redux'));

查看这里，store代表了整个应用程序的状态，而状态的初始化当然也是在store中进行处理，有两种方式：

指定reducer中的state参数默认值，store被创建的时候，这个reducer会被执行一次，reducer内我们把这个默认值返回返回即可
指定createStore的第二个参数，这个参数代表默认值，这种方式指定的优先级比以上默认值方式更高，即这个值会在初始化的时候被传递进reducer的state。

以上两种方式的本质都是要求reducer返回一个初始值，只不过这个初始值可能是默认值而已。

reducer

这个函数的职责就是根据当前state以及action，计算出下一个新的状态new_state，如果不需要发生变化，则返回原state即可

创建Store的时候，需要传入一个函数作为Store的Reducer。以上dispatch之后，这个Action就会被传入到这个Store中的reducer进行处理，返回一个新的state

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

对于程序的初始状态，可以这么进行设置（在执行createStore的时候，reducer会被首次执行用于获取初始状态，显然这个时候store没有任何状态，所以应该给state设置一个默认值，作为初始状态）：

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

规范要求Reducer是一个纯函数，不能对输入数据进行修改，而且相同的输入对应相同的输出（更加方便测试）。所以必须要返回一个全新的对象，手段如下：

function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  return { ...state, ...newState };
  return [...state, newItem];
}

以上reduce返回了一个不同的对象（state），就代表界面需要刷新，因为状态发生变化了。这需要在view中对store进行监听：

store.subscribe(listener);

在以上的listener中调用setState即可。

回顾以上的逻辑（调用了Store的subscribe、getState和dispatch方法）：

　　在模块中创建store，view引入这个模块，进行store.subscrible注册监听。

　　在注册的回调函数中，先调用store.getState获取到最新的状态，然后把数据通过setState更新到界面上（View模板中通过this.state.xx获取数据）

　　用于与view发生交互，view调用store.dispatch，然后store中的reducer被执行，返回一个新的state，以上的监听就会被触发

Reducer拆分

以上可以发现一个store中对状态的修改全部集中在reduce函数中，有必要对这个函数进行拆分

const chatReducer = (state = defaultState, action = {}) => {
  return {
    chatLog: chatLog(state.chatLog, action),
    statusMessage: statusMessage(state.statusMessage, action),
    userName: userName(state.userName, action)
  }
};

可见以上的state中有3个字段，每个字段的值都通过一个函数的返回值来决定，在这个函数中进行action.type的判断，再进行数据修改，返回最新的值。

这个过程可以使用Redux提供的语法糖combineReducers进行更改（这里使用了对象的简洁写法）：

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

Reducer的复用

　　以上使用combineReducers的时候，可能会遇到一个问题，如chatLog与statusMessage中对数据的处理逻辑很类似，怎么把这两个函数中的逻辑抽取出来呢？

　　假如这两部分直接使用相同的函数，这会造成一个问题，即这两个属性对于相同的action，返回的数据是一致的（因为调用的是同一个函数，里面对action.type的判断以及数据处理是完全一致的），即会同时相同改变。这不是我们想要的。

　　这时可以使用一个函数（高阶reducer）来生成这些需要被复用的reducer，然后通过参数来控制这些reducer的差异，实现返回的reducer内部逻辑大部分相同，但存在差异。如为里面判断的action.type添加一个前缀

State

一个view和一个state相互对应

const state = store.getState();

Action

用户与View发生交互，View发出Action，触发State的变化（因为State是从Store中获取的，所以也可以说成Store发生变化）

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

Action Creator简化Action的生成

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

中间件

分析以上过程可以发现，Dispatch到reduce之间的细节被封装到Redux框架内部，假如我希望在执行dispatch的时候先进行一些操作，后执行reduce或者说要增强dispatch。这就需要用到中间件。

使用Flux架构进行开发，会遇到一个问题，纠结在哪里处理异步，哪里发请求，这是因为Flux没有规定在哪里进行异步请求（感觉其实也可以这样，在action creator中调用dispatch之前进行异步请求，有了结果之后再进行dispatch action 告知结果）。而redux在这点上提供了解决方案，使用中间件增强dispatch，使其可以处理异步请求。

手动实现一个日志中间件

let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

redux-thunk

thunk返回一个接收 ‘ dispatch’ 的函数Fn，在Fn中进行异步操作，返回promise，在这个promise上注册的回调函数中可以调用dispatch，使用的方式如下：

// thunk
function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch,getState) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    )
  }
}

// Thunk middleware 可以让我们像 dispatch 普通 action
// 一样 dispatch 异步的 thunk action。
store.dispatch(
  makeASandwichWithSecretSauce('Me')
)

本质就是thunk返回的函数中返回一个promise，在这个promise的异步操作中调用dispatch，可以发送action。

React-redux

redux不一定要配合react来使用，更加通用。而react-redux提供了api帮助react和redux进行绑定

了解容器型组件和展示型组件。容器组件由React-Redux生成，即状态全部交由框架来管理。

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

基本的用法就是最外层一个provider，接着就是容器组件，这个容器组件是通过react-redux的connect生成的，connect为这个容器组件中的所有子组件提供了访问store的功能，connect帮助store与组件建立关联（state映射到props），即通过组件内的props可以获取到store中state的值，以及当state发生变化，组件会自动重新渲染（connect中mapStateToProps(state)和mapDispatchProps(dispatch)也会重新执行，即重新执行映射），而这些功能都在Container中做好了。

这里记录一些使用要点：

　　首先定义一个展示型组件（无状态组件），里面UI的回调函数以及要展示的数据都是通过props获取的
　　通过connect根据展示型组件生成一个容器组件，还需要函数mapStateToProps(state)和mapDispatchProps(dispatch)，前者用于把传入的state（第一次执行的话这个state就是来源于store的初始state，有两种方法可以指定），映射成props对象属性返回，这里用到的state是通过store.getState获取，而store后面会传入；后者也是用于定义props对象属性返回，这不过这些属性都是函数，用于被容器中的子组件调用，在这些函数中调用dispatch发送action，或者这些函数中直接返回一个action，也会被自动发送。

　　以上创建完成容器组件之后，接着通过createStore(reducer)创建store，根据以往的理解，接下来需要通过store.subscrible进行监听，如果reducer返回的state发生变化，则回调函数会被执行，里面执行setState触发重新渲染。但这个监听的步骤在react-redux中已经做好了，在容器组件被实例化的时候，会获取外部的store（后面会说道怎么把store传给容器组件），然后进行监听，已经重新渲染等操作。

　　最后通过provider的store属性（provider组件从React-redux中获取），把我们创建的store传递进去即可。被provider包着的容器组件内部就可获取到这个store了。回顾context的用法就知道provider内部做了什么（定义getChildContext）以及容器组件是如何获取到store了（通过this.context获取）。

　　对于树形的组件结构如何用react-redux来实现？展示型组件中有多个子组件，这些子组件可以拥有自己的状态，也可以通过获取上级展示型组件中的props来展示数据。

dispatch除了可以在中mapDispatchProps(dispatch)使用，还可以在被连接的展示型组件中使用：

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'
import { Provider,connect } from 'react-redux'

let Btn = ({dispatch})=>{
    return (
        <button onClick={()=>{dispatch({type:"click"})}}>click</button>
    )
}

const reducer = (state,action)=>{
    console.log(action)
    return state;
}
const store = createStore(reducer);
Btn = connect()(Btn);

ReactDOM.render(
    <Provider store={store}>
        <Btn />
    </Provider>,
    document.getElementById('root')
);

这里补充一个react-redux的异步状态初始化的例子：

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'
import { Provider,connect } from 'react-redux'

class Show extends React.Component{
    componentDidMount(){
        this.props.loadData();
    }
    render(){
        return <div>{this.props.msg}</div>
    }
}
const mapStateToProps = (state)=>{
    return {
        msg:state.msg
    }
};
const mapDispatchProps = (dispatch)=>{
    return {
        loadData:() => {
            setTimeout(()=>{
                dispatch({type:"onLoaded",data:"async data"})
            },2000);
        }
    }
}
const Container = connect(mapStateToProps,mapDispatchProps)(Show);

const reducer = (state, action) => {
    switch (action.type) {
        case "onLoaded":
            return {
                msg: action.data
            }
    }
    return state
}
const initState = {msg:""}
const store = createStore(reducer,initState);

ReactDOM.render(
    <Provider store={store}>
        <Container/>
    </Provider>,
    document.getElementById('root')
);

运行结果：2s 后界面上才会显示数据。