如何在React Redux中以不同的参数分配相同的动作

Question

我想知道如何在React Redux中分派具有不同参数的动作。

在format.js中，具有不同参数的queryData由callFetch方法调用。道具分发后，在render方法中，将在道具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;

3. 将步骤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，然后使用化简器将它们分类为inactive和active。