Как я получаю данные после УСПЕХА при отправке ЗАПРОСА в getInitialProps - PullRequest
0 голосов
/ 06 мая 2020

Я хочу вызвать api-вызов с redux-saga в следующем. js.

// sagas/deliveries.js

import axios from 'axios';
import { put, takeEvery, all, fork, call } from 'redux-saga/effects';
import {
  LOAD_DELIVERIES_REQUEST,
  loadDeliveriesSuccess,
  loadDeliveriesFailure,
} from '../reducers/deliveries';

function* loadDeliveries() {
  try {
    const { data } = yield axios.get(`${process.env.SERVER}/deliveries`);
    yield put(loadDeliveriesSuccess(data));
  } catch (error) {
    console.error(error);
    yield put(loadDeliveriesFailure(error));
  }
}

function* watchLoadDeliveries() {
  yield takeEvery(LOAD_DELIVERIES_REQUEST, loadDeliveries);
}

export default function* deliveriesSaga() {
  yield all([fork(watchLoadDeliveries)]);
}
// reducers/deliveries.js

// Action
export const LOAD_DELIVERIES_REQUEST = 'LOAD_DELIVERIES_REQUEST';
export const LOAD_DELIVERIES_SUCCESS = 'LOAD_DELIVERIES_SUCCESS';
export const LOAD_DELIVERIES_FAILURE = 'LOAD_DELIVERIES_FAILURE';

export const loadDeliveriesRequest = () => ({ type: LOAD_DELIVERIES_REQUEST });
export const loadDeliveriesSuccess = data => ({ type: LOAD_DELIVERIES_SUCCESS, data });
export const loadDeliveriesFailure = error => ({ type: LOAD_DELIVERIES_FAILURE, error });

// Reducer
const initialState = {
  deliveryPosts: [],
  error: '',
};

export default function deliveries(state = initialState, action) {
  switch (action.type) {
    case LOAD_DELIVERIES_SUCCESS:
      return { ...state, deliveryPosts: action.data };
    case LOAD_DELIVERIES_FAILURE:
      return { ...state, error: action.error };
    default:
      return state;
  }
}
// pages/_app.js

function MyApp({ Component, pageProps, store }) {
  const router = useRouter();

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};

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

  return { pageProps };
};

const configureStore = (initialState, options) => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const enhancer =
    process.env.NODE_ENV === 'production'
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));
  const store = createStore(rootReducer, initialState, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);

  return store;
};

export default withRedux(configureStore)(withReduxSaga(MyApp));
// pages/posts.tsx

Posts.getInitialProps = async context => {
  await context.store.dispatch({ type: LOAD_DELIVERIES_REQUEST });
  console.log(context.store.getState().deliveries.deliveryPosts); // It is empty!

  return { posts: posts.data, deliveryPosts: context.store.getState().deliveries.deliveryPosts };

Но я обновляю страницу sh или перехожу на эту страницу еще раз, deliveryPosts is.

Я думаю, что перед получением данных в действии SUCCESS верните данные getState (). Как я получаю данные после УСПЕХА при отправке ЗАПРОСА в getInitialProps?

useDispatch и useSelector не могут использоваться в getInitialProps

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...