我有一个用户存储,可以处理所有用户操作,包括获取用户数据和更新用户信息。我还拥有一个帖子存储,可以获取用户写的帖子,还可以发布,更新和删除它们。
当我更新用户信息并调用函数时:
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状态以重新显示主页。