react, redux - Modifying parent components with redux

Question

Okay so I had a problem when programming in react, and I've found that it's a common one. If I have multiple nested components, in my case I have:

<AppView>
  <Navigation/> // this is a navbar
  <ViewHandler currentTab={props.currentTab}/>
  <Footer/>
</AppView>

And then in <ViewHandler/> I have other dumb presentational components, which also have nested components as well. If I have a button in a deeply nested component within <ViewHandler>, and I want to respond to onClick from that button by changing something many parent components above the component that I am in, how would I do so? In my case I would be reacting to the button being clicked in that deeply nested component, and then I want to change the selected tab on <Navigation>. I don't want to pass a bunch of callback functions down as properties, because that feels very scotch-tape-ish.

I learned redux because I read that it solved this problem. But for me it hasn't. I am giving <AppView> access to my redux store using react-redux's <Provider>, and I can access the store through props (props.currentTab). But for all the components nested within <AppView>, they don't have access to the store or any of my action creators. How can modify my store from within a deeply nested component so that I may change a parent component without passing a ton of callback functions down? Or is this just incorrect architecture? I thought redux would solve this problem but it hasn't.

Yes I have connected my component. I just don't like the idea of passing down store.state information as props because it gets very redundant with many nested components.

You are not using redux properly. The selectedTab should be coming from the store.state. It should be using a property passed to it. When the button is clicked the store state should be updated to reflect the selected tab. It also sounds like you need to connect the component. Just wrapping it with Provider, does not give it access like you are thinking. redux.js.org/docs/basics/UsageWithReact.html — Norm Crandall
Could you please add the code you'we written for your store, components and actions so we could help? — caisah
@NormCrandall I am using connect() so that I can access currentTab through props — jrademacher

Dan O Dan O · Accepted Answer · 2017-03-05T00:35:20

I don't know why you think you have to send props all the way down your component tree. That's what connect and mapStateToProps help you avoid: they let you turn bits of app state into props only for the components which need it.

in your button's onClick handler, create and dispatch a Redux action:

// button.js

onClick={() => {
  dispatch({
    payload: 1 // or whatever value
    type: 'SET_SELECTED_TAB'
  });
}}

next, have your reducer function watch for this action and modify a bit of Redux app state:

// reducer.js

if (action.type === 'SET_SELECTED_TAB') {
  return {
    ...currentAppState,
    selectedTab: action.payload
  };
}

finally, in the render function of your <Navigation> component, you decide which tab to show based on the current values in that bit of app state:

// Navigation.js

render() {
  return (
    <div>
      current tab: {this.props.selectedTab}
    </div>
  );
}

access to that state is via connect and mapStateToProps:

// Navigation.js still

const mapStateToProps = (appState) => {
  return {
    selectedTab: appState.selectedTab
  };
};

export default connect(mapStateToProps)(Navigation);

react, redux - Modifying parent components with redux

2 Answers