Question

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

默认状态

{
  statusCategory: 'init',
  dataCategory: [],
  errorCategory: null,
}

佐贺

export function* getSportCategory({ callback }) {
  try {
    const options = {
      url: `http://localhost:8000/sport`,
      method: 'GET',
    }

    yield put({
      type: ACTION_TYPES.SPORT.GET_CATEGORY_LOAD,
    });

    const response = call(axios, options);

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

      yield put({
        type: ACTION_TYPES.SPORT.GET_CATEGORY_RES,
        payload: { data, status },
      });
      if (callback) callback(null, response);
    } else {
      yield put({
        type: ACTION_TYPES.SPORT.GET_CATEGORY_ERR,
        error: response.status,
      });
      if (callback) callback(error);
    }
  } catch (err) {
    yield put({
      type: ACTION_TYPES.SPORT.GET_CATEGORY_ERR,
      error: err,
    });
    if (callback) callback(error);
  }
}

export default function* combineSaga() {
  yield takeEvery(ACTION_TYPES.SPORT.GET_CATEGORY, getSportCategory);
}

减速器

const defaultState = DEFAULT_STATE.SPORT;

function reducer(state = defaultState, action) {
  switch (action.type) {
    case ACTION_TYPES.SPORT.GET_CATEGORY_LOAD:
      return {
        ...state,
        statusCategory: STATUS_TYPES.LOADING,
      };

    case ACTION_TYPES.SPORT.GET_CATEGORY_RES:
      return {
        ...state,
        dataCategory: action.payload.data,
        statusCategory: STATUS_TYPES.SUCCESS,
      };
    
    case ACTION_TYPES.SPORT.GET_CATEGORY_ERR:
      return {
        ...state,
        statusCategory: STATUS_TYPES.ERROR,
        errorCategory: 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));

Index.js

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

  return <div>Home</div>;
}

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

  store.dispatch({
    type: ACTION_TYPES.SPORT.GET_CATEGORY,
    payload: {},
  });

  return {};
}

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

Answer 1

您需要执行2个操作

要在Home组件中使用的getDataFromServer
setDataToRedux用于传奇和减速器中的动作类型

NextJS redux-saga状态未更新

1 个答案: