[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>
        );
    }
}

 

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.