分享下react-redux的connect心得



  • redux的store,reduce这些都好理解,一直没整明白connect的来龙去脉,今天下午空,仔细看了下source code,分享之。connect的目的是连接redux的store与React的组件properties.

    import { Provider } from 'react-redux'
    import App from './containers/App'
    import configureStore from './store/configureStore'
    import 'todomvc-app-css/index.css'
    
    const store = configureStore()
    
    render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    )
    

    这个是最常见的,首页入口,再看App.js

    class App extends Component {
      render() {
       .....
    }
    }
    
    App.propTypes = {
      todos: PropTypes.array.isRequired,
      actions: PropTypes.object.isRequired
    }
    
    function mapStateToProps(state) {
      return {
        todos: state.todos
      }
    }
    
    function mapDispatchToProps(dispatch) {
      return {
        actions: bindActionCreators(TodoActions, dispatch)
      }
    }
    
    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(App)
    

    注意上面的connect,目的是将store中的getStates().todos,映射到App组件的todos属性上。这是本文的重点,查看connect.js,发现这里面直接整了一个Connect(App)的组件,在render时又直接返回了一个App的组件。在这个过程中,Connect(App)从上下文中获取到了store,并且调用mapStateToProps,mapDispatchToProps把返回值直接merge到app组件上了。

    那Connect(App)中上下文从何而来?答案在在Provide组件中,

      Provider.prototype.getChildContext = function getChildContext() {
        return { store: this.store };
      };
    

    完了。收工。


登录后回复