У меня есть пользовательское хранилище, которое обрабатывает все пользовательские действия, которые включают выборку пользовательских данных и обновление пользовательской информации.У меня также есть почтовое хранилище, которое извлекает сообщения, написанные пользователями, а также публикует, обновляет и удаляет их.
Когда я обновляю информацию о моем пользователе и вызываю свою функцию:
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 для повторного отображения домашней страницы.