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.

  • 相关阅读:
    mysql-8.0.16-winx64/Linux修改root用户密码
    MYSQL学习笔记/2019
    博客论坛系统数据库之表的设计
    MySql-8.0.16版本部分安装问题修正
    将博客搬至CSDN
    解决远程连不到CentOS7虚拟机或ifconfig中没有ens33
    Windows本地运行调试Spark或Hadoop程序失败:ERROR util.Shell: Failed to locate the winutils binary in the hadoop binary path
    CentOS7安装Git-2.22.1
    CentOS7安装SVN1.9.12
    Storm本地启动拓扑报错:Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/storm/topology/IRichSpout
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5805251.html
Copyright © 2011-2022 走看看