zoukankan      html  css  js  c++  java
  • [Redux] Accessing Dispatch and State with Redux -- connect

    If you have props and actions, you want one component to access those props and actions, one solution is pass those from parent to this component. But one problem for this solution is if the there are many nested component between, you need to pass the props and actions all the way down to that component. It would be quite plainful and hard to maintain.

    One better solution is using "connect" which provided by 'react-redux' libaray. 

        <Provider store={store}>
            <Router history={history}>
                <Route path="/" component={Main}>
                    <IndexRoute component={PhotoGrid}></IndexRoute>
                    <Route path="/view/:postId" component={SingleGrid}></Route>
                </Route>
            </Router>
        </Provider>

    Let's say I want to pass the props and actions to 'Main' component.

    And the Main component it looks like: 

    import React from 'react';
    import { Link } from 'react-router';
    
    export default class Main extends React.Component{
        constructor(){
            super();
        }
        render(){
            return (
                <div>
                    <h1>
                        <Link to="/"> Reduxuxstagram </Link>
                    </h1>
                    /**
                    *  To enable pass this.props to the children
                    *  We need to use React.cloneElement()
                    * */
                    {React.cloneElement(this.props.children, this.props)}
                </div>
            );
        }
    }
    View Code

    What we can do is create a new file called 'App.js' to connect 'Main' component:

    //App.js
    
    import {bindActionCreators} from 'redux';
    import {connect} from 'react-redux';
    import * as actionCreators from '../actionCreator';
    import Main from './Main';
    
    function mapStateToProps(state){
        return {
            posts: state.posts,
            commnets: state.comments
        }
    }
    
    function mapDispatchToProps(dispatch){
        return bindActionCreators(actionCreators, dispatch);
    }
    
    // The idea to pass props and actions to Main Component is to use 'connect'.
    const App = connect(
        mapStateToProps,
        mapDispatchToProps
    )(Main);
    
    export default App;

    Now instead using 'Main' component in the Route, we use 'App' istead:

        <Provider store={store}>
            <Router history={history}>
                <Route path="/" component={App}>
                    <IndexRoute component={PhotoGrid}></IndexRoute>
                    <Route path="/view/:postId" component={SingleGrid}></Route>
                </Route>
            </Router>
        </Provider>

    So if we open React devtool, and check the Main component, we can see, 'posts' and 'comments' from state are available, also the actions 'addComment', 'removeComment' also available to Main component.

  • 相关阅读:
    java序列化进阶
    jQuery学习一(选择器)
    java poi 操作Excel常用方法总结
    mybatis批量foreach的使用
    java中关于try、catch、finally的总结
    MyEclipse使用指南(精简版)
    单例模式
    抽象工厂模式
    java.io.Serializable
    java.lang.string
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5805251.html
Copyright © 2011-2022 走看看