Получите ответ от рассылки - React Redux - PullRequest
Новая
       11

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

2 голосов
/ 30 мая 2019

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

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

1 Ответ

2 голосов
/ 30 мая 2019

Хотя вам действительно нужно просто использовать 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 очень хорошо работает с обещаниями.

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

...