Реакция Redux -Возможно перезвонить в диспетчерской функции

Question

Ребята, у меня возникли некоторые проблемы или я весьма сомневаюсь.

У меня один компонент и один редуктор.

Редуктор. js

import {
    ASSET_POPUP_GET_ENDPOINT,
} from 'apiCollection';
import { performGet } from 'services/rest-service/rest-service';

export const GET_ASSETS_LIST = 'stories/GET_ASSETS_LIST';


const initialState = {
    imgGroup: [],

    isLoading: false,

};

const modalUploadReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_ASSETS_LIST: {
            return {
                ...state,

                ImageJson:action.payload.imageGroup,

            };
        }
        case GET_ASSETS_LIST_ERROR: {
            return {
                ...state,
                isLoading:false,
            };
        }
        default:
            return state;
    }
};

export const getModalClose = () => (dispatch) => {
    dispatch({ type: CLOSE_MODAL });
}

export const getListActionDispactcher = () => (dispatch) => {
    performGet(`${ASSET_POPUP_GET_ENDPOINT}`)
      .then((response) => {
        const payload = response.data;
        dispatch({ type: GET_ASSETS_LIST,
          payload: {
            ...payload,
            data: payload.results,
          } });
      })
      .catch((err) => {
        dispatch({ type: GET_ASSETS_LIST_ERROR, payload: err });
        throw err;
      });
  };



export default modalUploadReducer;

и мой компонент выглядит как

, у него действительно есть mapStateToProps и mapDispatchToProps и одна из функций

const mapDispatchToProps = dispatch => ({
    getCollection: () => dispatch(getListActionDispactcher()),
});

addDocumentClick = () =>{
    this.props.getAssetsCollection();
}

, и возможно ли иметь некоторое setState / манипулирование ответом после получения ответа api от редуктора в компоненте

на основе ответа мне нужно внести некоторые изменения в addDocumentClick. Означает что-то вроде этого

addDocumentClick = () =>{
    this.props.getAssetsCollection().then(...based on response;
}

Answer 1

Правильный способ решения этой проблемы - установить глобальный флаг loading и в вашем методе componentDidUpdate() проверить значение, чтобы определить, что действие только что выполнено. Кажется, у вас уже есть флаг isLoading. Просто установите его, когда действие отправлено, и отмените его после того, как оно выполнено / не выполнено. И в componentDidUpdate():

function componentDidUpdate(prevProps) {
  if (prevProps.isLoading && !this.props.isLoading) {
    // do something
  }
}

Конечно, вам нужно connect() ваш флаг загрузки для вашего компонента, чтобы достичь этого.

Если все, что вас волнует, это список активов изменилось, вы можете просто проверить изменение этого реквизита в componentDidUpdate():

function componentDidUpdate(prevProps) {
  if (prevProps.ImageJson !== this.props.ImageJson) {
    // do something
  }
}

---

Другое решение - отправить обратный вызов вашему диспетчеру действий, что делает ваш код более тесно связанным, и я не рекомендую, но это тоже работает. Итак, когда вы connect(), вы можете:

getCollection: (onSuccess) => dispatch(getListActionDispactcher(onSuccess)),

В вашем диспетчере действий:

export const getListActionDispactcher = (onSuccess) => (dispatch) => {
  // ...once API finished/failed
  onSuccess(someData);
}

Наконец, в вашем компоненте:

this.props.getCollection((result) => {
  console.log('succeeded!', result);
  // hide modal, etc..
}

Answer 2

Вы используете redux-thunk , и вызов thunk вернет обещание, которое разрешится во всех ваших возвратах в thunk. Поэтому все, что вам нужно сделать, это добавить возвращаемое значение к getListActionDispactcher

export const getListActionDispactcher = () => (dispatch) => {
  // return this promise
  return performGet(`${ASSET_POPUP_GET_ENDPOINT}`)
    .then((response) => {
      const payload = response.data;
      dispatch({ type: GET_ASSETS_LIST,
        payload: {
          ...payload,
          data: payload.results,
        } });
      // return whatever you want from promise
      return payload
    })
    .catch((err) => {
      dispatch({ type: GET_ASSETS_LIST_ERROR, payload: err });
      throw err;
    });
};

.

addDocumentClick = () => {
  this.props.getAssetsCollection().then(payload => console.log(payload))
}

Однако вы должны искать способы избежать этого шаблона, чтобы ваш компоненты отделены от действий, насколько это возможно, ради модульности