首页 > 解决方案 > 从 reducer 数组中检索单个元素

问题描述

我有一个公司减速器,我想包含一系列公司。由于当用户继续时每个对象都相当大,/company/name我只想从我的 API 中获取那个对象并将其添加到这个数组中,所以如果用户多次访问同一个公司页面,我将不必再次调用 api。

我的减速机:

const initialState = {
  companies: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case GET_COMPANIES:
      return {
        ...state
      };
    case GET_COMPANY:
      return {
        ...state,
        companies: [action.payload, ...state.companies]
      };
    default:
      return state;
  }
};

有没有办法让我更新减速器中的状态并只返回 1 家公司?如上所示,这将返回所有处于此状态的公司,尽管从逻辑上讲它对 'GET_COMPANY' 没有意义

我的行动:

export const getCompany = name => dispatch => {
  axios.get("/companies/" + name).then(res =>
    dispatch({
      type: GET_COMPANY,
      payload: res.data
    })
  );
};

标签: javascriptreactjsredux

解决方案


您需要一些 'id' 或 'name' 或要检索的公司对象的其他属性,并且可以使用 find 方法执行此操作:

action.payload.find(company=>company.id===id)

根据 MDN: find() 方法返回数组中满足提供的测试功能的第一个元素的值。否则返回未定义。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find


推荐阅读