react redux connect in nested components

Question

Unable to get multiple nested components with redux-connect when rendering

I have created drop-down components with redux connect to reuse in my application.

Components created CategoryDropDown ,SubCategoryDropDown, CategoryTypeDropDown

I am nesting the CategoryDropDown component into the SubCategoryDropDown -Working Correctly

When nesting the SubCategoryDropDown in the CategoryTypeDropDown Component only the CategoryDropDown connect() method gets triggered.

// This is the connect method that is used in all the components //

export default connect(
    mapStateToProps,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(SubCategoryDropDown);

Am I using the component and redux-connect correctly when working with nested components?

Can I update a child component from another parent component? I know you can update parent from the child using props but not sure how to do it other way around.

Ashish Kamble Ashish Kamble · Accepted Answer · 2019-06-27T10:21:56

connect function must be exported, can have syntax like this, there are lots of difrent ways to do so, so here SubCategoryDropDown component can use connected things as props,

export default connect(
    mapStateToProps,
    mapDispatchToProps 
)(SubCategoryDropDown);

now i have actions imported, the maped to props,

import { addTodo, deleteTodo} from './actionCreators'

const mapDispatchToProps = {
  addTodo,
  deleteTodo
}

the things present in state like todos are use as props now, inside only (SubCategoryDropDown) component,

const mapStateToProps = state => ({ todos: state.todos })

as you are nesting CategoryDropDown, you can pass data to child like this,

<CategoryDropDown todos=this.props.todos />

react redux connect in nested components

2 Answers