Reactjs NextJS redux saga状态未更新

我正试图通过redux saga在nextjs中获取数据。但是我的数据不会显示，然后我在每个文件中调试，最后发现数据已成功获取，但状态不会更新。我一直在跟踪文档，不知道是哪个部分导致了问题。谢谢你的帮助

默认状态

{
  status: 'init',
  data: [],
  error: null,
}

传奇

减速器

const defaultState = DEFAULT_STATE.CARS;

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ACTION_TYPES.CARS.LOAD:
      return {
        ...state,
        status: 'loading',
      };

    case ACTION_TYPES.CARS.RES:
      return {
        ...state,
        data: action.payload.data,
        status: 'success',
      };
    
    case ACTION_TYPES.CARS.ERR:
      return {
        ...state,
        status: 'error',
        error: action.error,
      };

    default:
      return state;
  }
}

export default reducer;

存储配置

const makeStore = () => {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware),
  )

  store.sagaTask = sagaMiddleware.run(rootSaga)

  return store
}

export default createWrapper(makeStore);

App.js

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Component {...pageProps} />
    </div>
  );
}

MyApp.getInitialProps = async appContext => {
  const { Component, ctx } = appContext;

  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
}

export default wrapper.withRedux(withReduxSaga(MyApp));

函数MyApp（{Component，pageProps}）{
返回(
);
}
MyApp.getInitialProps=异步appContext=>{
const{Component，ctx}=appContext；
让pageProps={}；
if（Component.getInitialProps）{
pageProps=等待组件.getInitialProps（ctx）；
}
返回{pageProps}；
}
导出默认包装器。withRedux（withReduxSaga（MyApp））；

Index.js

function Home({ storeCars }) {
  useEffect(() => {
    //always show default state
    console.log(storeCars);
  }, [storeCars.status]);

  return <div>Home</div>;
}

Home.getInitialProps = async props => {
  const { store } = props;

  store.dispatch({
    type: ACTION_TYPES.CARS.GET,
    payload: {},
  });

  return {};
}

export default connect(state => state)(Home);

函数主页（{storeCars}）{
useffect（（）=>{
//始终显示默认状态
控制台日志（存储车）；
}，[storeCars.status]）；
回家；
}
Home.getInitialProps=异步props=>{
const{store}=props；
仓库调度({
类型：ACTION_TYPES.CARS.GET，
有效载荷：{}，
});
返回{}；
}
导出默认连接（状态=>状态）（主）；

您需要两个操作

要在主组件中使用的getDataFromServer

setDataToRedux用于saga和减速器中的动作类型

function Home({ storeCars }) {
  useEffect(() => {
    //always show default state
    console.log(storeCars);
  }, [storeCars.status]);

  return <div>Home</div>;
}

Home.getInitialProps = async props => {
  const { store } = props;

  store.dispatch({
    type: ACTION_TYPES.CARS.GET,
    payload: {},
  });

  return {};
}

export default connect(state => state)(Home);