Help with React-Redux connect - Could not find "store"

Hi,

I am having issues when trying to use react-redux connect to connect React component to redux store.

I have looked at the redux helpers examples here https://ryandrewjohnson.github.io/react-localize-redux-docs/#redux-helpers and it looks like it should work with react-localize-redux (unless the redux helpers example is not using react-redux).

I used the code sandbox demo (https://codesandbox.io/s/14xp1xy9ql) and added react-redux to the dependencies list and added the following code to Main.js

const mapStateToProps = state => {
  currentLanguage: getActiveLanguage(state.localize).code;
};

export default connect(mapStateToProps)(Main);

But I received the following error.

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

Anyone knows what I am missing?

[invivtas92]

Yes, I initially thought LocalizeProvider is meant to replace react-redux’s Provider. Wrapping the application with Provider and LocalizeProvider as follows seems to solve the issue (assuming this is the proper way of doing it)

<LocalizeProvider>
  <Provider store={this.state.store}>
    <Router> 
      <Route path="/" component={props => 
        <Main 
          onToggleClick={this.onToggleReduxClick} 
          toggleValue={this.state.isUsingRedux} 
        />
      } />
    </Router>
  </Provider>
</LocalizeProvider>

[DGulshan]

Docs need to be more clear about this issue. Also, if you wish to use withLocalize HOC to get the translate function prop in your components, you must provide store prop to LocalizeProvider. So the example code block would look something like this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { LocalizeProvider } from 'react-localize-redux'

...

ReactDOM.render(
  (
    <Provider store={this.state.store}>
      <LocalizeProvider store={this.state.store}>
        <Router>
          ...
        </Router>
      </LocalizeProvider>
    </Provider>
  ),
  document.getElementById('root')
)