reactjs - 从调度中获取响应 - React Redux

Question

我怎样才能从分派(dispatch)操作得到响应返回到组件并在上下文中获取值。

索引.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);
    });
}

reducer :

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);
}

这是一个 example在行动中。

我真的建议研究一些基于 Promise 的东西来进行 HTTP 调用，例如 fetch以避免需要回调。 redux-thunk 与 promises 配合得很好。

希望对您有所帮助!