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.

  • 相关阅读:
    sqlplus中var和print的使用
    sqlplus中break命令的使用
    android之OptionsMenu
    android之TabHost(下)
    android之TabHost(上)
    android之dialog
    android之listview
    android开发事件监听
    决策树ID3算法示例
    回溯法-设置碉堡
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5805251.html
Copyright © 2011-2022 走看看