SSR与Redux集成时，如何正确获取react-instantsearch的resultsState？

Hey there, let's break down why you're hitting this error and how to fix it quickly.

What's causing the issue? #

Your Search component is connected to Redux, which means it expects access to the Redux store either via React context (from wrapping it in <Provider>) or directly as a prop. When you call findResultsState(Search, { searchState }), you're rendering the Search component in isolation—without the Redux context it needs. That's exactly why you're seeing the Invariant Violation error.

Solution 1: Pass the store directly as a prop #

If your Search component is directly connected to Redux (using connect or useSelector/useDispatch), you can pass your Redux store instance as a prop when calling findResultsState:

// Import or access your Redux store instance
import store from './path/to/your/redux/store';

// Update your findResultsState call
const resultsState = await findResultsState(Search, {
  searchState,
  store: store // Pass the store directly to the component
});

Solution 2: Wrap the component in Redux Provider #

If your Search component has nested components that rely on Redux context, it's better to wrap it in the <Provider> component before passing it to findResultsState. Here's how:

import { Provider } from 'react-redux';
import store from './path/to/your/redux/store';

// Create a wrapped version of your Search component with Provider
const WrappedSearch = (props) => (
  <Provider store={store}>
    <Search {...props} />
  </Provider>
);

// Call findResultsState on the wrapped component
const resultsState = await findResultsState(WrappedSearch, { searchState });

Key Notes #

• Make sure you're using the correct store instance—if you're doing server-side rendering, you should create a fresh store for each request to avoid cross-request state pollution.
• If you're using Redux Toolkit, your store setup should still work the same way; just pass the configured store instance.

内容的提问来源于stack exchange，提问作者Albert Fang