Получить ответ от рассылки — React Redux

Как я могу получить ответ от действия отправки на компонент и получить значения в контексте.

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, мне нужно отобразить эти значения в таблице.


reactjs redux react-redux redux-thunk
person XXDebugger    schedule 30.05.2019    source источник
comment
Обновляется ли ваш редьюсер полезной нагрузкой действия?   -  person Cool Guy    schedule 30.05.2019
comment
mapStateToProps(), нацеленный на определенные свойства, которые обновляются в результате receivedConfig(). Получите доступ к ним как к свойствам в рендеринге компонента.   -  person Alexander Staroselsky    schedule 30.05.2019
comment
Есть ли другой способ доступа, кроме использования mapStateToProps. и доступ к нему непосредственно из хранилища контекста   -  person XXDebugger    schedule 30.05.2019

Ответы (1)


arrow_upward
2
arrow_downward

Хотя вам действительно следует использовать mapStateToProps() для извлечения необходимых данных из хранилища, вы можете вернуть промис, который разрешает ответ или отклоняет данные следующим образом:

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 очень хорошо работает с промисами.

Надеюсь, это поможет!

person Alexander Staroselsky    schedule 30.05.2019
comment
Это работает - каким-то образом я использую общие страницы, которые не позволяют мне использовать соединение для передачи данных, как это делает redux-thunk. Есть ли способ получить значение от редуктора так же, как мы получили ответ от действия? - person XXDebugger; 05.06.2019
comment
@PSDebugger Я не уверен, о чем вы спрашиваете. Вы хотите получить данные/ответ точно так же, как они передаются редуктору? Если да return resolve(dispatch(receivedConfig(response)));. Я бы сказал, что это довольно большая проблема, что вы по какой-то причине не можете использовать connect() в своих компонентах. Это вызовет много проблем при выполнении простых вещей, таких как получение состояния из хранилища. - person Alexander Staroselsky; 05.06.2019