единый редуктор для нескольких асинхронных вызовов в react, redux

#javascript #reactjs #redux #react-redux #redux-saga

#javascript #reactjs #redux #react-redux #redux-сага

Вопрос:

Я вызываю один post-запрос несколько раз, как показано ниже, из компонента в React js:

 Object.keys(data).map(account => {
    const accountRequest = {
        accountNo: account.accountNo,
        id : account.id
    }
    return this.props.requestAccountDetails(accountRequest)
}
  

requestAccountDetails — это функция, написанная в const mapDispatchToProps в контейнере:

 const mapDispatchToProps = (dispatch)  => {
    return {
        requestAccountDetails : (accountDetails)=> {
            dispatch(requestAccountDetailsInformation(accountDetails));
        }
    }
}
  

requestAcountDetailsInformation — это действие, написанное в action creator, которое вызывает redux-saga, которая вызывается несколько раз асинхронно в зависимости от количества учетных записей. Итак, если, скажем, количество учетных записей равно 5, запрос post, который я вызываю, выполняется 5 раз асинхронно с использованием redux-saga.

Проблема в том, что когда мой post-запрос возвращается успешно, я снова вызываю успешное действие, которое вызывает reducer, и данные передаются моему компоненту.Но поскольку вызов выполняется 5 раз, и он вызывает ту же функцию успеха и тот же редуктор.Он перезаписывает результат предыдущего вызова. Пример: если мой первый запрос возвращает результат, а второй запрос возвращает результат.Результат моего первого запроса перезаписывается в reducer.

Кто-нибудь может мне помочь, как я могу сохранить результат всех 5 запросов в одном редукторе.

Ответ №1:

вам нужно добавить результат в массив, а не перезаписывать его. допустим, у вас есть состояние.

 const state = {
accountDetails =[]
}
  

В редукторе при успешном вызове вы можете отправлять новые данные в accountDetails и обновлять состояние.

   reducer(initialState=state, action)
    switch(action.type){
      ....
    case Authsuccess: return { ...initialState,
                                accountDetails : [ 
                                ...initialState.accounDetails, 
                                 action.payload.accountInfo
                                 ],
                              }
           

                                  
  

Комментарии:

1. Но accountDetails =[] инициализируется в [] при каждом вызове

2. нет, мы инициализировали массив один раз в initialState. При успешном вызове мы добавляем ранее сохраненный результат в accountDetails и новые данные полезной нагрузки.

3. Предоставьте более подробную информацию, если это не так, кажется, что состояние становится пустым при каждом успешном вызове.