Passing function from mapDispatchToProps to Container component in react/redux app

Question

I'm rendering RootComponent:

//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------
ReactDOM.render(

    <Provider store={store}>
        <RootComponent />
    </Provider>, 

    document.getElementById('app'));
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------

RootComponent has only one container:

//ROOT COMPONENT----------------------------------------------------------------------------------------------------
const RootComponent = () => (

    <div>
        <BookListContainer />           
    </div>

);
//ROOT COMPONENT----------------------------------------------------------------------------------------------------

BooklistContainer:

//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------
class BookListContainer extends Component{

    componentWillMount(){
        console.log('componentWillMount executing...');
        () => this.props.ajaxRequestTriggeredMethod();
    }

    render() {
        return (
            <div>
                <BooksList DataInputParam={this.props.books} BtnClickHandler={this.props.buttonClickedMethod} />            
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return{
        books: state.BooksReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        buttonClickedMethod: () => dispatch({type: 'BUTTON_CLICKED'}),
        ajaxRequestTriggeredMethod: () => console.log('ajaxRequestTriggeredMethod is consoled...')
    };
};

connect(mapStateToProps, mapDispatchToProps)(BookListContainer);
//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------

All components are in one js file at the moment, so i'm not exporting/importing anything except standard libraries...

Result: i'm getting 'componentWillMount executing...' message in the console, but not getting 'ajaxRequestTriggeredMethod is consoled...' message. Also, no errors in the console are displayed.

score 2 · Answer 1 · answered Aug 17 '17 at 11:14

2

Its because you are not executing the arrow function. You can directly call this method instead.

componentWillMount(){
    console.log('componentWillMount executing...');
    this.props.ajaxRequestTriggeredMethod(); //Invoke directly
}

answered Aug 17 '17 at 11:14

Dev

3,922
3
24
44

Thanks for answer, but it seems i'm missing something important here: if i do **this.props.ajaxRequestTriggeredMethod();** i'm getting an error: **Uncaught TypeError: this.props.ajaxRequestTriggeredMethod is not a function** – KrasnokutskiyEA Aug 17 '17 at 11:18
1

@vshnukrshna Sorry, i was gone for some time. But as suggested by Gaetan, you should have the container component which would take care of connect and props, and pass down the props to presentational components. In your case though, I think you should export the the connected component, export default connect(mapStateToProps, mapDispatchToProps)(BookListContainer); – Dev Aug 17 '17 at 14:54
Thanks for help, @Dev! – KrasnokutskiyEA Aug 18 '17 at 09:39

score 1 · Accepted Answer · answered Aug 17 '17 at 11:31

1

Not an expert, but connect() function returns

A higher-order React component class that passes state and action creators into your component derived from the supplied arguments

So my guess would be to do something like this :

const randomNameForComponent = connect(mapStatetoProps, mapDispatchToProps)(BookListContainer);
export default randomNameForComponent;

and in your RootComponent, render randomNameForComponent instead of BookListComponent.

It should do the trick.

answered Aug 17 '17 at 11:31

Gaëtan Boyals

1,193
1
7
22

Thanks, @GaetanBoyals, it works! But now i'd just like to specify one aspect: As far as i understand each _container component_ a.k.a _smart component_ "connects" its children components to the store. Now, in this particular case, what should be considered as a container component: **BookListContainer** or **randomNameForComponent** or both of them? – KrasnokutskiyEA Aug 17 '17 at 11:47
No problems, I also struggled with connect for a long time ;) As for your question, it would be **randomNameForComponent**, because as stated on [this link](https://stackoverflow.com/questions/43414254/difference-between-component-and-container-in-react-redux) as the accepted answer, "A container component is a react component that has direct connection with state managed by Redux and also called 'smart component' ". Also, if my answer solved the problem, could you please mark it as correct ? Thank you :) – Gaëtan Boyals Aug 17 '17 at 13:06
My pleasure actually, glad I could help since I'm usually the one asking questions ^^ – Gaëtan Boyals Aug 17 '17 at 14:24

Passing function from mapDispatchToProps to Container component in react/redux app

2 Answers2