0

伙计们，我遇到了一些麻烦或非常怀疑。

我有一个组件和一个减速器。

减速器.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();
}

并且在从组件中的 reducer 获得 api 响应后是否有可能对响应进行一些 setState/操作

根据响应，我需要在 addDocumentClick 中进行一些更改。意思是这样的

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

2 回答 2

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..
}
于 2020-02-06T16:01:36.953 回答
-1

您正在使用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))
}

但是，您应该寻找避免这种模式的方法，以使您的组件与操作尽可能地分离，以实现模块化

于 2020-02-06T16:33:34.253 回答