redux 及 react-redux基本用法及源码解析

 某年某月某日，某师兄说：学一个东西，不能只停留在表面，只知道怎么用是完全不够的，

要清楚的明白，为什么这么做，为什么不那样做，还得从源码开始，虽然起步可能会比较坎坷，毕竟知识储备有限。

点到为止了，所以我也就尝试去看了 redux 以及 react-redux 源码，确实坎坷。

在此对看过的一些资料做一个总结。

先讲讲其基本用法，最后附上源码解析：

其实简单的应用，甚至只是一个单页应用，那完全是用不到 redux 的，只会让代码量提升了却没什么好处，出力不讨好。

redux 不仅仅只限于和 react 搭配使用，它可说是一个数据（state）管理器，也可在其他场景中使用。

当然 react-redux 就顾名思义不是适用于任何场景了。

如果用过 FLUX 的同学，应该会对 redux 的主要思想比较容易理解：

单项数据流，但存在与 FLUX比较大的差别是redux 整个应用只有一个数据源，也就是只有一个 store，在复杂的应用中也统一管理所有的数据。

我觉得 store 是整个 redux 的核心，最为核心的就是 store 的四个 function:

dispatch：分发 Action 到对应的 Reducer后，根据 Reducer 逻辑更改store 中的 state，之后触发 subscribe的 listener,

getState：获取当前store 中的 state 数据,

subscribe： 注册 listener，在 state 变化时触发,

replaceReducer：替换 Reducer，修改 state 变化逻辑，不是很常用。

我们需要做的是创建 store，Action，Reducer，最基本，最简单的写法：

//actionType
export const ACTION_TYPE = 'ACTION_TYPE';
//actionCreator
let actionCreator = (config) => {
    return {
        type: ACTION_TYPE, // 必须定义 type
        config // 可定义任何属性，都会传递到 reducer，用于修改 state
    }
}

action 其实就是一个普通对象，当然你也可以直接写这个对象，但存在诸多劣势。

import { ACTION_A, ACTION_B } from '../actions';
let initialState = { ... }
function example(state = initialState, action) {
    switch(action.type) {
        case ACTION_A:
          return Object.assign({}, state, action.config)
        case ACTION_B:
          return Object.assign({}, state, action.config)
	default:
	  return state
    }
}

reducer 里只做修改state，纯函数。

import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';
import reducers from './reducers';
let store = createStore(reducers);
ReactDOM.render((
  <Provider store={store}>
   // ...
  </Provider>
), document.querySelector('#app'));

创建一个 store，也是整个应用唯一的 store。

Provider 是 react-redux 中提供的。可以通过Provider将 store 传递到包含在它之内的所有子组件里，但需配合 connect 使用。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionA } from 'actions';
class ComponentA extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(actionA())
    }
    render() {
//由于所用到的 state 都绑定到了 props 中，component 中用到的时候可在 props 中获取
	<div>{this.props.propA}</div>
    }
}let mapStateToProps = (state) => { 
// attention,会把最新的 state 数据绑定到组件 props 中。 
//只需绑定和本组件相关的 state 即可（state 是包含了整个应用的所有数据的。
let { reducerA, reducerB } = state; 
    return { 
        propA: reducerA.propA, 
        propB: reducerB.propB 
    }
};
export default connect(mapStateToProps)(ComponentA);

connect 也是 react-redux 中提供的，这里简单的介绍下，最基础的用法就是只传mapStateToProps 方法，

返回的是一个包含了调用 getState，subscribe 的原组件（这里即 ComponentA）。

这样就完成一整套简单的 redux 融合的 react 组件应用了。

但这样的数据交互都是同步的，无法支持 ajax 的异步请求。

如果想实现就需要加入 thunk中间件去完成，同时需改造 action，不仅仅是一个简单的普通 Object 即可完成的了。

另一种方法即在 component 中创建store，在 component 内就能直接调用 store.dispatch,store.subscribe,store.getState 等方法，完成数据管理。

但这种写法有个坑，即比如在 componentDidMount中注册了 subscribe 的 listener 时会返回一个 unsubscribe 方法，

用于解绑的，必须在 componentWillUnmount 的时候执行该方法，不然会报警告，在组件卸载时仍在监听。

componentDidMount(){
    self.unsubscribe = subscribe(()=>{xxx});
}
componentWillUnmount(){
    self.unsubscribe();
}

需要异步请求时，需要对 store 和 action 进行改造加强：

export default function configureStore(initialState) {
  const store = createStore(rootReducer,initialState,applyMiddleware(
    thunkMiddleware,//支持异步操作
    createLogger()//输出 redux 的action 和 state相关 log
  ))
  return store;
}

action 需改成根据异步请求不同状态发出不同的 action，包装成一个方法来完成

export function  fetchAction() {
    return dispatch => {
        dispatch({
            type: 'REQUEST_POSTS'
        })
        return fetch(`xxxxx`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(function (json) {
                if (json.success) {
                    dispatch({
                        type: CATEGORIES_RECEIVE_POSTS,
                        data: json
                    })
                } else {
                    info('数据获取失败，请稍候再试！')
                }
            })
            .catch(e => {
                debugger;
            })
    }
}

直白的理解就是发起请求时发出一个 action（不真实改变 state，只改变请求状态），

请求返回成功一个action，失败一个 action 让 reducer 做出不同的对 state 的修改，即可完成异步请求。

源码解析接下一篇博客哟~