Redux

1、数据流

2、redux的实现

const createStore = (reducer) => {
    let state = {};
    let listeners = [];

    const getState = () => state;

    const dispatch = (action) => (reducer) => {
        state = reducer(state, action);
        listeners.forEach(fn => fn());
    }

    let subscribe = (listener) => {
        listeners.push(listener);
    }
    //初始的状态
    dispatch({type: '@@CHEN-REDUX});
    return { getState, dispatch, subscribe }
}

export {createStore} ;

3、context的使用

在生命周期方法中引用 Context
如果 contextTypes 在组件中定义，下列的生命周期方法将接受一个额外的参数， context 对象：

• constructor(props, context)
• componentWillReceiveProps(nextProps, nextContext)
• shouldComponentUpdate(nextProps, nextState, nextContext)
• componentWillUpdate(nextProps, nextState, nextContext)
• componentDidUpdate(prevProps, prevState, prevContext)
• function(props, context)

childContextTypes中声明类型要不不能用 getChildContext 中取

4、react-redux的实现

Provider 利用context属性可以让所有的子组件来取到store

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

export class Provider extends React.Component {
    static childContextTypes = {
        store:PropTypes.object
    }
    constructor(props, context) {
        super(props, context);
        this.store = props.store;
    }

    getChildContext() {
        return {store: this.store}
    }

    render() {
        return this.props.children;
    }
}

connet 的实现

import React, {PropTypes} from 'react';

//高阶组件
//1.负责接收一个组件，把state里的数据放进去，返回一个组件
//2.数据变化的时候，能够通知组件

function bindActionCreator (creators, dispatch) {
    return (...args) => dispatch(creator(...args));
}

function bindActionCreators (creators, dispatch) {
    let bound = {};
    Object.keys(creators).forEach(v=>{
        let creator = creators[v]
        bound[v] = bindActionCreator(creator, dispatch)
    })
    return bound;
}

export const connect = (mapStateToProps = state => state, 
    mapDispatchToProps = {}) => (WrapComponent) => {
    return class ConnectComponent extends React.Component {
        static contextTypes = {
            store: PropTypes.object
        }
        constructor(props, context) {
            super(props, context);
            this.state = {
                props: {}
            }
        }

        componentDidMount() {
            const {store} = this.context;
            store.subscribe(()=>this.update());
            this.update();
        }

        update() {
            const {store} = this.context;
            //把state传入mapStateToProps，然后返回自己需要的
            const stateProps = mapStateToProps(store.getState());
            //方法不能直接给，需要dispatch  直接执行addGun()是没有意义的。
            //需要addGun = store.dispatch(addGun 才有意义
            const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
            this.setState({
                props: {
                    ...this.state.props,
                    ...stateProps,
                    ...dispatchProps
                }
                
            })
        }

        render() {
            return <WrapComponent {...this.state.props} />
        }
    }
};

5、中间件

中间件的理解

只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能

举例来说，要添加日志功能，把 Action 和 State 打印出来，可以对store.dispatch进行如下改造。

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

对store.dispatch进行了重定义，在发送 Action 前后添加了打印功能。这就是中间件的雏形。

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，

中间件的使用

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger)
);

applyMiddlewares() 的实现单个

const createStore = (reducer, enhancer) => {
    if (enhancer) {
        return enhander(createStore)(reducer);
    }
    let state = {};
    let listeners = [];

    const getState = () => state;

    const dispatch = (action) => (reducer) => {
        state = reducer(state, action);
        listeners.forEach(fn => fn());
    }

    let subscribe = (listener) => {
        listeners.push(listener);
    }

    dispatch({});
    return { getState, dispatch, subscribe }
}

export function applyMiddleware (middleware) {
    return createStore=>(...args)=>{
        const store = createStore(...args);
        let dispatch = store.dispatch;

        const midApi = {
            getState: store.getState,
            dispatch: (...args) => dispatch(...args)
        }
        dispatch = middleware(midApi)(store.dispatch);
        return {
            ...store,
            dispatch
        }
    }
}

多个中间件

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);

    return {...store, dispatch}
  }
}

compose

export function compose (...funcs) {
    if (funcs.length == 0) {
        return arg => arg;
    }
    if (funcs.length == 1) {
        return funcs[0]
    }
    return funcs.reduce((ret, item) => (...args) => ret(item(...item)))
}

compost(f1, f2, f3)

f1(f2(f3()))

自己实现一个thunk 感觉就是处理异步的callback

const thunk = ({dispatch, getState})=>next=>action=> {
    if (typeof action == 'function') {
        return action(dispatch, getState);
    }
    return next(actions);
}

export default thunk;

使用传入的是active

store.dispatch(function(dispatch){
            setTimeout(function(){
                dispatch({type: 'INCREMENT'})
            }, 5000)
        })

理解

const thunk = function({dispatch, getState}){
    return function (next) { //dispatch = middleware(midApi)(store.dispatch);
        return function (action) {
            if (typeof action == 'function') {
                return action(dispatch, getState);
            }
            return next(actions);
        } 
    }
}

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

多个连续异步

store.dispatch(function(dispatch){
            setTimeout(function(){
                console.log('1')
                dispatch(function(dispatch) {
                    setTimeout(function () {
                        console.log('2')
                        dispatch({type: 'INCREMENT'})
                    }, 2000)
                }) 
                
            }, 1000)
        })
        console.log('0')

redux-promise的源码，就会明白它内部是怎么操作的

export default function promiseMiddleware({ dispatch }) {
  return next => action => {
    if (!isFSA(action)) {
      return isPromise(action)
        ? action.then(dispatch)
        : next(action);
    }

    return isPromise(action.payload)
      ? action.payload.then(
          result => dispatch({ ...action, payload: result }),
          error => {
            dispatch({ ...action, payload: error, error: true });
            return Promise.reject(error);
          }
        )
      : next(action);
  };
}

如果 Action 本身是一个 Promise，它 resolve 以后的值应该是一个 Action 对象，会被dispatch方法送出（action.then(dispatch)），但 reject 以后不会有任何动作；如果 Action 对象的payload属性是一个 Promise 对象，那么无论 resolve 和 reject，dispatch方法都会发出 Action。

使用有两种方式：

第一种穿promise然后返回action

store.dispatch(
    new Promise((resolve, reject)=> {
                setTimeout(()=> {
                    console.log(1);
                    resolve('sss')
                }, 2000)
            }).then(response => { return {
                type: 'INCREMENT',
                payload: response
              }})
        )

一种是在把传入的active的payload生成promise

store.dispatch(
        {
            type:'INCREMENT',
            payload: new Promise((resolve, reject)=> {
                setTimeout(()=> {
                    console.log(1);
                    resolve('sss')
                }, 2000)
            }).then(function(data) {
                return data;
            })
        }
    )