как отправить одно и то же действие с разными параметрами в ответной реакции

Question

Хотелось бы узнать, как диспетчеризировать действие с разными параметрами в реагирующем редуксе.

В формате. js, queryData с разными параметрами вызывается методом callFetch. После отправки реквизита, в методе рендеринга, получим данные в реквизитах 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;

Импортируйте селекторы из шага 2 в ваши компоненты и используйте mapStateToProps(state) для получения данных из вашего состояния:

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

Использовать данные в рендере:

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

Удачи

PS: я бы использовал один вызов API, чтобы получить все members, а затем классифицировать их как inactive & active в моем состоянии, используя редуктор .