reactjs - 如何在 Redux 中将两个不同的 store 连接到同一个 action？

Question

我有一个用户存储来处理所有用户操作，包括获取用户数据和更新用户信息。我还有一个帖子商店，它可以获取用户写的帖子以及帖子、更新和删除它们。

当我更新我的用户信息并调用我的函数时：

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 状态以重新呈现主页。

标签： reactjsredux