CODEWITHSUNDEEP
reactjsredux
SkinnyG33k
SkinnyG33k

Reputation: 1731

Can't connect Redux to a grandchild component

How can I connect Redux to a child component that's several layers below the parent component? I can't figure out how to pass store into props without it blowing up.

I'm not using IronRouter and am using Redux 3 with React 0.13. Here's an example:

const SearchBar = React.createClass({
  render() {
    return <div> {this.props.text} </div>;
  }
});


function mapStateToProps(state) {
  return {text: state.search.text};
}

_SearchBar = connect(mapStateToProps)(SearchBar);

Could not find "store" in either the context or props of "Connect(SearchBar)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(SearchBar)".

Upvotes: 1

Views: 1458

Answers (2)

F0RR
F0RR

Reputation: 1620

1) Wrap your root component in <Provider store={store}></Provider>:

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <YourAppComponent />
      </Provider>
    )
  }
}

Provider passes the store through React's context.

2) Your connect() should work now :), but only if all your connected components are descendants of <YourAppComponent />

Upvotes: 2

Michelle Tilley
Michelle Tilley

Reputation: 159115

You either need to pass the store all the way down through the intermediary components, or like the message says, utilize the <Provider> component at the top of the app which will pass it down automatically.

Upvotes: 4

Related Questions