React-instantsearch: Question: how to use findResultsState and connect redux correctly, when server-side rendering?

[Clarencef]

I try to get resultsState by call react-instantsearch's findResultsState API, But can't integrate with the component already connected with redux store. Error will show like below.

Invariant Violation: Could not find "store" in either the context or props of component . Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to component

Call api like this way

findResultsState(
  component: Search, {
  searchState
});

My component looks like this. It is composed with some HOCs, and some HOC will connect with redux store through react-redux connect function.

Search = compose(
  intlWrapper,
  withModal,
  withGlobalAlert,
  withMainLayout,
  injectIntl,
)(Search);

Server-side Provider will render like this

const appString = renderToString(
  <Provider store={store}>
    <StaticRouter location={req.url} context={ context }>
      <Main />
    </StaticRouter>
  </Provider>
);

Client-side:

const store = configureStore(history, 
window.__APP_INITIAL_REDUX_STATE__);

// Render component
hydrate(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Main />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

Main

<Switch>
  { routes.map( route => <Route key={ route.path } { ...route } />)}
</Switch>

routes

export default [
  {
    path: '/search',
    component: Search,
  },{
   ...
  }
  ...
];

[samouss]

By looking at the code it's a bit hard to understand where the issue come from. The error is thrown by Redux and not InstantSearch. Could you please provide a reproducible example? It will help to better understand where the issue come from. Thanks!

[Clarencef]

I made a repo clone from server-side rendering example hope can reproduce this situation, https://github.com/Clarencef/react_instant_question,
Please clone this repo and run yarn and yarn start go to localhost:8080/home
error will show at commandline.
If I comment this line at server.js

const resultsState = await findResultsState(Home);

app will work normally and no error at commandline.
Can we expect an Redux & react-router server-side rendering example for react-instantsearch?
Appreciate your reply.

[samouss]

Thanks a lot for the reproduction, it helps a lot! I've send a PR to the project. Indeed we provide two separate guides, one for the routing and the other for the SSR. It could be nice to have one that combine both with Redux.

[Clarencef]

Thanks for doing that, I believe if we can have an example that will make my life easier.
If there’s anything I can do to help, please let me know.

[samouss]

I'm closing this issue in favor of #1211. Feel free to reopen a new one if needed!