关于函数式编程——优美的redux码源

梳理下redux Api

import { createStore, combineReducers, bindActionCreators, applyMiddleware } from 'redux'; 【静态】
let { subscribe, dispatch, getState } = createStore(reducer， initStore) 【实例后的】
reducer = （previousState, action） => newState 【路由和数据组装的作用】

react-redux

import { connect } from 'react-redux' const VisibleTodoList = connect( mapStateToProps, // 输入逻辑 mapDispathcToProps // 输出 )(TodoList);

import { Provider } from 'react-redux'


const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}

const mapDispatchToProps = ( dispatch, ownProps ) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }); } }; }


## createStore内部的发布订阅原理
```js
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 };
};

《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇

https://segmentfault.com/a/1190000012394641

Hibop / Hibop.github.io

关于函数式编程——优美的redux码源 #28

梳理下redux Api

react-redux

《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇

Redux FAQ