启用一个组件显示来自两个 api 提取的数据

Question

对于 React 应用程序，我使用 Redux 从 API 获取数据。在此应用程序中，存在一个在同一页面上显示两次的组件。该组件连接到一个动作和减速器。

组件的两个实例应显示不同的数据：一个显示某人的工作，另一个显示某人的电话号码。这两件事都是在单独的API调用中请求的，导致第二次调用的数据覆盖了连接到组件的reducer中第一次调用获得的数据的问题。怎么可能对这样一个显示两次的组件进行两次 API 调用，以便它的两个实例都显示这些 API 调用中的任何一个的数据？

我尝试了以下方法：提出一个请求并填充减速器。然后发出另一个请求并在reducer中合并两者的结果。但是，这种方法的问题在于，也有可能只显示应用程序中的一个组件。

这是反应组件：

class Display extends React.Component {
  componentWillMount() {
    const { fetchpayload } = this.props;
    fetchpayload(this.props.parameter);
  }

  render() {
    return (
        <h1>{this.props.payload}</h1>
    );
  }
}

const mapStateToProps = (state) => ({
  payload: state.DisplayReducer.payload,
});

const mapDispatchToProps = (dispatch) => bindActionCreators(
  {
    fetchpayload: payloadAction,
  },
  dispatch,
);

这是减速器

const initialState = {
  payload: [],
};

export function DisplayReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCHED_DISPLAY':
      return {
        ...state,
        payload: action.payload,
      };
      return state;
  }
}

动作文件发出请求，并分派“FETCHED_DISPLAY”。

Answer 1

只是不要覆盖你在 reducer 中的东西

const InitialState = {
  person: {
    name: '',
    job: ''
  }
};

export default (state = InitialState, action) => {
  switch(action.type) {
    case NAME:
      return {
        ...state.person,
        person: {
          job: ...state.person.job,
          name: action.payload
        }
      }
    case JOB:
      return {
        ...state.person,
        person: {
          name: ...state.person.name,
          job: action.payload
        }
      }
 // do that with whatever property of object person you would want to update/fetch
    }
  }
}

希望这会有所帮助。