如何在react redux中使用不同的参数调度相同的动作

Question

我想知道如何在 react redux 中调度具有不同参数的操作。

在format.js中，queryData参数不同的callFetch方法调用。 props dispatch 后，在 render 方法中会收到 props memberData 中的数据，

我收到回复memberData，状态为Inactive，但是 如何同时显示Active 和Inactive，

// format.js

componentDidMount(){
 this.callFetch();
}

callFetch(){
    this.props.dispatch(queryData(this.createFetchUrl("Active")));
    this.props.dispatch(queryData(this.createFetchUrl("Inactive")));
}

createFetchUrl(status) {
   const body ={
     position: "civil",
     status: status 
   }
  return body;
}

render(){
  const { memberData } = this.props.data
  return(
     <div>
     Active 
     <p>{memberData}</p>
     Inactive
     <p>{memberData}</p>
    </div>
  )
}


//actions.js
export const queryDeviceByMember = payload =>
  queryApi({
    request: CONSTANTS.DATA,
    url: `api/details`,
    encode: false,
    success: CONSTANTS.DATA_SUCCESS,
    failure: CONSTANTS.DATA_FAILURE,
    ...payload
  });

//reducer.js

    case CONSTANTS.DATA_SUCCESS:
    case CONSTANTS.DATA_FAILURE:
      return {
        ...state,
        memberData: data,
        apiPending: false,
        errormsg: errormsg,
        servererror: servererror || ""
      };

active 和 inactive 状态都收到相同的响应，因为它会覆盖，而不是覆盖如何做

[{
   id: "20",
   name: "xxx",
   device: "ios"
 },
 {
   id: "10",
   name: "yyy",
   device: "ios"
 }]

Answer 1

您正在覆盖memberData 中的数据，请考虑执行以下步骤：

1. 将减速器拆分为 active 和 inactive 案例
2. 使用选择器从您的状态中选择数据，即：

export const getActiveMembers = state => state.activeMembers;
export const getInactiveMembers= state => state.inactiveMembers;

1. 将步骤 2 中的选择器导入到您的组件中，并使用 mapStateToProps(state) 从您的状态中获取数据：

function mapStateToProps(state) {
    return {
        activeMembers: getActiveMembers(state),
        subscription: getInactiveMembers(state)
    };
}

4. 使用渲染中的数据：

render(){
 const { memberData } = this.props.data
 return(
    <div>
    Active 
    <p>{memberData}</p>
    Inactive
    <p>{memberData}</p>
   </div>
 )
}

5. 祝你好运

P.S：我会使用一个 API 调用来获取所有 members，然后使用 reducer 在我的状态下将它们分类为 inactive 和 active。