Как мне подключить два разных магазина к одному действию в Redux? - PullRequest
0 голосов
/ 15 ноября 2018

У меня есть пользовательское хранилище, которое обрабатывает все пользовательские действия, которые включают выборку пользовательских данных и обновление пользовательской информации.У меня также есть почтовое хранилище, которое извлекает сообщения, написанные пользователями, а также публикует, обновляет и удаляет их.

Когда я обновляю информацию о моем пользователе и вызываю свою функцию:

export const putUserDataPending = () => {
  return {
    type: "PUT_USER_DATA_PENDING"
  }
}

export const putUserDataFulfilled = user => {
  return {
    type: "PUT_USER_DATA_FULFILLED",
    user: user
  }
}

export const putUserDataRejected = error => {
  return {
    type: "PUT_USER_DATA_REJECTED",
    error: error
  }
}

export const putUserData = (username, email, countries, home) => {
  const token = localStorage.getItem('token');
  return dispatch => {
    dispatch(putUserDataPending());
    axios.put(
      'http://localhost:8000/api/v1/rest-auth/user/',
      {
        username: username,
        email: email,
        countries: countries,
        home: home
      },
      {headers: { 'Authorization': `Token ${token}`}}
  )
      .then(response => {
        const user = response.data;
        dispatch(putUserDataFulfilled(user));
      })
      .catch(err => {
        dispatch(putUserDataRejected(err));
      })
  }
}

Он отображает страницу профиля пользователя, но не отображает информацию об авторе, потому что состояние сообщений никогда не обновлялось.Какой правильный способ обновить любой из объектов автора в состоянии сообщений, которые могли быть обновлены при обновлении пользователя?

Или просто лучше вручную перерисовать домашнюю страницу?

Мой домСтраница MapState выглядит следующим образом:

const mapState = state => {
  return {
    fetched: state.tripReport.fetched,
    fetching: state.tripReport.fetching,
    tripReports: state.tripReport.tripReports,
    showCountryModal: state.modal.showCountryModal,
    modalCountry: state.modal.modalCountry
  };
}

, где tripReports - это массив объектов, а некоторых авторов я хочу обновить.

Мой editProfile MapState выглядит следующим образом:

const mapState = state => {
  return {
    user: state.user.user,
    userCountries: state.user.user.countries,
    searchedCountry: state.country.country,
    showProfileModal: state.modal.showProfileModal,
    modalProfile: state.modal.modalProfile
  };
}

Где пользовательский объект - это объект, который обновляется.

Вот редуктор записи:

const initialState = {
  fetching: false,
  fetched: false,
  fetchingTripReports: false,
  fetchedTripReports: false,
  tripReports: [],
  userTripReports: [],
  error: null,
}

export default function (state = initialState, action) {
  switch (action.type) {
    case "FETCH_TRIP_REPORTS_PENDING": {
      return {
        ...state,
        fetching: true
      }
    }
    case "FETCH_TRIP_REPORTS_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        tripReports: action.tripReports
      }
    }
    case "FETCH_TRIP_REPORTS_REJECTED": {
      return {
        ...state,
        fetching: false,
        fetched: false,
        error: action.error
      }
    }
    case "FETCH_USER_TRIP_REPORTS_PENDING": {
      return {
        ...state,
        fetchingTripReports: true
      }
    }
    case "FETCH_USER_TRIP_REPORTS_FULFILLED": {
      return {
        ...state,
        fetchingTripReports: false,
        fetchedTripReports: true,
        userTripReports: action.tripReports
      }
    }
    case "FETCH_USER_TRIP_REPORTS_REJECTED": {
      return {
        ...state,
        fetchingTripReports: false,
        fetchedTripReports: false,
        error: action.error
      }
    }
    case "POST_TRIP_REPORTS_PENDING": {
      return {
        ...state,
      }
    }
    case "POST_TRIP_REPORTS_FULFILLED": {
      return {
        ...state,
        // The new trip report must be added onto the array, then the array must be sorted by id.
        userTripReports: [...state.userTripReports].concat(action.response).sort((a, b) => a.id < b.id),
        tripReports: [...state.tripReports].concat(action.response).sort((a, b) => a.id < b.id)
      }
    }
    case "POST_TRIP_REPORTS_REJECTED": {
      return {
        ...state,
        error: action.error
        }
    }
    case "DELETE_TRIP_REPORTS_PENDING": {
      return {
        ...state,
      }
    }
    case "DELETE_TRIP_REPORTS_FULFILLED": {
      return {
        ...state,
        // The deleted post must be filtered out of the lists.
        userTripReports: state.userTripReports.filter(tripReport => tripReport.id !== action.response.id),
        tripReports: state.tripReports.filter(tripReport => tripReport.id !== action.response.id)
      }
    }
    case "DELETE_TRIP_REPORTS_REJECTED": {
      return {
        ...state,
        error: action.error
      }
    }
    case "UPDATE_TRIP_REPORTS_PENDING": {
      return {
        ...state,
      }
    }
    case "UPDATE_TRIP_REPORTS_FULFILLED": {
      return {
        ...state,
        // The old post must be filtered out, the updated post must be added, then the array must be sorted.
        userTripReports: [...state.userTripReports].filter(tripReport => tripReport.id !== action.response.id).concat(action.response).sort((a, b) => a.id < b.id),
        tripReports: [...state.tripReports].filter(tripReport => tripReport.id !== action.response.id).concat(action.response).sort((a, b) => a.id < b.id),
        response: action.response
      }
    }
    case "UPDATE_TRIP_REPORTS_REJECTED": {
      return {
        ...state,
        error: action.error
      }
    }
    default:
      return state
  }
}

, а вот редуктор пользователя:

const initialState = {
  fetching: false,
  fetched: false,
  adding: false,
  added: false,
  user: {},
  error: null,
}

/* Reducer Function*/
export default function (state = initialState, action) {
  switch (action.type) {
    case "FETCH_USER_PENDING": {
      return {
        ...state,
        fetching: true
      }
    }
    case "FETCH_USER_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        user: action.user
      }
    }
    case "FETCH_USER_REJECTED": {
      return {
        ...state,
        fetching: false,
        fetched: false,
        error: action.error
      }
    }
    case "PUT_USER_DATA_PENDING": {
      return {
        ...state,
        adding: true,
        added: false,
      }
    }
    case "PUT_USER_DATA_FULFILLED": {
      return {
        ...state,
        adding: false,
        added: true,
        user: action.user
      }
    }
    case "PUT_USER_DATA_REJECTED": {
      return {
        ...state,
        adding: false,
        added: false,
        error: action.error
      }
    }
    default:
      return state
  }
}

Где в действии 'PUT_USER_DATA_FULFILLED' я хотел бы обновить состояние tripReport для повторного отображения домашней страницы.

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