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.

  • 相关阅读:
    以AO方式给SceneControl控件设置BaseHeight
    TreeView只能选中一个节点
    Excel导出DataTable
    TOCControl右键菜单
    Arcgis Engine符号化相关
    shapefile文件锁定问题
    ArcGIS符号库serverstyle文件编辑注意事项
    CentOS运维常用命令
    常用shell
    javascript浮点数相减、相乘出现一长串小数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5805251.html
Copyright © 2011-2022 走看看