从调度中获取响应 - React Redux

Question

如何从调度操作中获取对组件的响应并获取上下文中的值。

index.jsx ：

    componentWillMount() {
        this.context.store.dispatch(getConfigSettings());
    }

调度呼叫 ：

export function getConfigSettings(params) {
    return (dispatch) => {
        dispatch(requestConfig());
        admin.getConfig(params,
            (response) => {
                return dispatch(receivedConfig(response));
            },
            (error) => {
                return dispatch(failedConfig(error));
            }
        );
    };
}
export function getConfig(params, onSuccess, onFailure) {
    const url = `${process.env}/admin/data`;
    return $.get(url,
        (response) => {
            onSuccess(response);
        }).fail((error) => {
        onFailure(error);
    });
}

还原剂：

import {
    request,
    received,
    failed
} from '../actions/actions';
const defaultState = Immutable.fromJS({
    data: Immutable.fromJS([]),
    loading: true,
    error: false
});
const reducer = createReducer({
    [request]: (state, res) => {
        return state.set('loading', true)
            .set('error', false)
    },
    [received]: (state, res) => {
        return state.set('data', Immutable.fromJS(res))
            .set('loading', false)
            .set('error', false); 
    },
    [failed]: (state, res) => {
        return state.set('data', Immutable.fromJS({}))
            .set('loading', false)
            .set('error', true)
    }
}, defaultState);
export default reducer;

我已经检查了响应是否具有正确的值。但是如何在index.jsx中访问该值我必须在表中显示这些值。

Answer 1

虽然您确实应该只使用 mapStateToProps(( 从存储中检索所需的数据，但您可以返回一个 Promise 来解析响应或拒绝数据，如下所示：

export function getConfigSettings(params) {
    return (dispatch) => {
        dispatch(requestConfig());
        return new Promise((resolve, reject) => {
          admin.getConfig(params,
              (response) => {
                  dispatch(receivedConfig(response));
                  return resolve(response);
                  // or return resolve(dispatch(receivedConfig(response)));
              },
              (error) => {
                  dispatch(failedConfig(error));
                  return reject(error);
                  // or return reject(dispatch(failedConfig(error)));
              }
          );
        }
    };
}

然后在组件中，您可以使用 then() 和 catch() 访问已解决的响应或拒绝的错误：

componentWillMount() {
  this.context.store.dispatch(getConfigSettings())
    .then(response => console.log(response))
    .catch(err => console.log(err);
}

下面是一个实际示例。

我真的建议研究一些基于Promise的东西来进行HTTP调用，例如fetch，以避免需要回调。 redux-thunk与承诺非常有效。

希望对您有所帮助！