Оператор распространения... копирование состояния

#reactjs #react-native #pagination #react-context

#reactjs #react-native #разбивка на страницы #реагировать-контекст

Вопрос:

Я использую разбивку на страницы, и мне нужно добавить после итерации страницы новые данные в состояние. Использование контекста для хранения моих данных.

функция для выборки данных

 const fetchMissions = (dispatch) => async (page) => {
  const response = await fdApi.get('/mission', {
    params: { page, limit: 10 },
  });
  dispatch({ type: 'fetch_missions', payload: response.data });
};

Редуктор

 const missionReducer = (state, action) => {
  switch (action.type) {
    case 'add_error':
      return { ...state, errorMessage: action.payload };
    case 'fetch_missions':
      return action.payload
    default:
      return state;
  }
};

Проблема в случае редуктора ‘fetch_missions’, не знаю, как сохранить старые данные при загрузке новой страницы и добавить новые данные в тот же массив

Вывод с моего сервера

Ответ №1:

Используйте необходимость изменить ваш редуктор, предполагая, что ваше состояние похоже {missions: []} . Убедитесь, что ваши начальные миссии в состоянии — пустой массив

 case 'fetch_missions':
      return {missions: [...state.missions, ...action.payload.missions.docs]}

1. Недопустимый JS и action.payload.missions является объектом в примере данных OP

2. @Matt правильно, {state.missions: []} это недопустимый способ присвоения свойства объекта. Вы, наверное, просто хотели сделать {missions: ?

3. да, извините, я этого не видел, проверьте это {миссии: […state.missions, …действие. полезная нагрузка.миссии.документы]}

4. Я все еще не совсем прав, { ...state, missions: [...state.missions, ...action.payload.missions.docs]} и это предполагает, что у вас правильная структура state

5. Ему нужно убедиться, что структура состояния верна. вышесказанное просто для того, чтобы показать, как он может его использовать

Ответ №2:

Вам нужно будет обновить свой редуктор, чтобы иметь этот код:

 // Setup the initial state of the reducer to have empty arrays or null for all values
const initialState = {
    errorMessage: null,
    missions: {
        data: [],
        pageInfo: {},
    }
};
const missionReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'add_error':
      return { ...state, errorMessage: action.payload };
    case 'fetch_missions':
      return {
        ...state,
        missions: { ...missions, data: [...missions.data, ...action.payload.missions.docs] } 
     };
    default:
      return state;
  }
};