CODEWITHSUNDEEP
reactjsreact-redux
Crispen Smith
Crispen Smith

Reputation: 533

Best way to pass store to a child of connected component in React-Redux

What's the correct way to implement the below design?

<Parent with state>
   <connected element with Store configuration dependant on parent>
      <child of both, dependant on store/connected element>
   </connected element>
 </parent>

I'm not sure how much code to include and there's almost certainly more than I need so here's a snippet that I think explains what I'm trying to accomplish. 

class SceneOne extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      opacity: 0,
      script: sceneOneScript
    };
  }

  render () {   
    return (
      <ScriptReader script = {this.state.script}> //This is connected and creates a store from the script passed via state.
        <Screen data-image="caves.png" data-opacity={this.state.opacity} >//This uses actual SceneOne.state.opacity which is updated to 1 after a delay in ComponentDidMount

          <ConditionalTitle  props = {this.props}/> //This needs the store.
         </Screen>
      </ScriptReader>
    );
  }
}

I'm really hoping that I don't need to connect <ConditionalTitle> because that feels like it breaks agnostic components principles. I'm also hoping that I don't need to install <ConditionalTitle> inside the definition of <ScriptReader> because I'm planning on reusing it and passing different children/scripts etc.

ie. there'll be a that has a <ScreenReader> child and it may not have a title, or may have elements that aren't required in <SceneOne>.

Upvotes: 0

Views: 113

Answers (1)

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

use a HOC inside the definition of the ScriptReader that composes all of the options

Upvotes: 1

Related Questions