在 NEXT.JS 中使用 redux

Question

在我在 Next.Js 上的应用程序中，我使用 redux 和 redux saga。 我想使用 ssr 发出 http 请求：

 export const getStaticProps = wrapper.getStaticProps(async ({ store }) => { store.dispatch(getDataRequest()); store.dispatch(END); await store.sagaTask.toPromise(); });

同时我想获取上述结果的数据：

 const selector = useSelector((s) => s); console.log(selector);

问题是，当我运行应用程序时出现错误：

 Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

我使用了提供者，但数据没有出现。
问题：如何解决我的应用程序中的问题？
演示： https://codesandbox.io/s/awesome-butterfly-f7vgd?file=/pages/store/saga.js

Answer 1

这是你的 _app 组件：

function App({ Component, pageProps }) {
  return (
    <div>
      <Provider store={makeStore}>
        <Component {...pageProps} />
      </Provider>
    </div>
  );
}

你不需要用Provider包装它。 这是您在_app中唯一需要做的事情。

export default wrapper.withRedux(App)

这是你的pages/index.js中的getStatisProps

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
  store.dispatch(getDataRequest());
  store.dispatch(END);
  await store.sagaTask.toPromise();
});

see store 已经通过这里了。 您将通过store.getState()访问 state。 这是应该的

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
      store.dispatch(getDataRequest());
      store.dispatch(END);
      await store.sagaTask.toPromise();
      const state = store.getState(); 
      return {props:{data:state}} // since you have only one reducer
    });

现在data将作为道具传递给您的组件。 如果您在组件内使用console.log(props.data) ，您应该会看到您的dataReducer