參考：https://segmentfault.com/a/1190000015042646

https://www.jianshu.com/p/e3cdce986ee2
https://segmentfault.com/a/1190000010416732?utm_source=tag-newest

• 介紹
  React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數據，並且向store分發actions以更新數據。

  react-redux僅有2個API，Provider和connect，Provider提供的是一個頂層容器的作用，實現store的上下文傳遞。

  connect方法比較復雜，雖然代碼只有368行，但是為redux中常用的功能實現了和react連接的建立。

• API介紹
  
  • conncet([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
    conncet連接React組件與 Redux store, 實現了redux中常用的功能和react連接的建立。
    

    import {connect} from ‘react-redux‘;
    const mapState = (state) => ({
        username: state.getIn([
     
    ‘header‘, ‘user_info‘, ‘user‘]),
    });
    const mapDispatch = (dispatch) => ({
        getUserList() {
            dispatch(actionCreators.actionGetUserList());
        }
    });
    export default connect(mapState, mapDispatch,[mergeProps], [options])(App);

    參數介紹：

    • mapStateToProps(state, ownProps)
      這個函數允許我們將store
      中的數據作為props綁定到組件上。
      這個函數的第一個參數就是 Redux 的store。
這個函數的第二個參數ownProps，是當前組件自己的props。


      const mapStateToProps = (state, ownProps) => {
        return {
          greaterThanFive: state.count > 5,
          id: ownProps.userId
        }
      }

    • mapDispatchToProps(dispatch, ownProps)
      它的功能是，將action作為props綁定到當前組件上。
      

      const mapDispatch = (dispatch, ownProps) => ({
          getUserList1() {
              dispatch(actionCreators.actionGetUserList1());
          },
      

          getUserList2() {
              dispatch(ownProps.actionGetUserList2());
          }

      });

    • mergeProps
      mergeProps如果不指定，則默認返回 Object.assign({}, ownProps, stateProps, dispatchProps)，顧名思義，mergeProps是合並的意思，將state合並後傳遞給組件。
    • options
  • <Provider>
    Provider提供的是一個頂層容器的作用，實現store的上下文傳遞。
    

    import React from ‘react‘;
    import ReactDOM from ‘react-dom‘;
    import {Provider} from ‘react-redux‘;
    import route from ‘./config/router‘; //路由配置
    import store from ‘./store‘;
    
    ReactDOM.render(
        <Provider store={store}>
            {route}
        </Provider>
        , document.getElementById(‘root‘)
    );

Redux學習筆記-React-Redux 的用法