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

[Hibop]

梳理下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' <Provider store={store} > <App /> </Provider>

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内部的发布订阅原理

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]

Redux FAQ

• https://cloud.tencent.com/developer/section/1374216