NextJS redux-saga 状态未更新

Question

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

默认状态

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

佐贺

export function* getCars() {
  try {
    const options = {
      url: `http://localhost/some-endpoint`,
      method: 'GET',
    }

    yield put({
      type: ACTION_TYPES.CARS.LOAD,
    });

    const response = call(axios, options);

    if (response.data) {
      const { data, status } = response;

      yield put({
        type: ACTION_TYPES.CARS.RES,
        payload: { data, status },
      });
    } else {
      yield put({
        type: ACTION_TYPES.CARS.ERR,
        error: response.status,
      });
    }
  } catch (err) {
    yield put({
      type: ACTION_TYPES.CARS.ERR,
      error: err,
    });
  }
}

export default function* combineSaga() {
  yield takeEvery(ACTION_TYPES.CARS.GET, getCars);
}

减速器

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);

应用程序.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));

索引.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);

Answer 1

你需要2个动作

1. 要在 Home 组件中使用的 getDataFromServer
2. setDataToRedux 用于 saga 和 reducer 中的动作类型