Подписка на избыточное действие в реактивном компоненте - PullRequest
Новая
       53

Подписка на избыточное действие в реактивном компоненте

0 голосов
/ 24 мая 2018

У меня есть асинхронный поток, который извлекает некоторую информацию из веб-службы, он может отправлять три типа действий 

FETCH_REQUESTED
FETCH_SUCCEEDED
FETCH_FAILED

Наконец, если это удалось;он возвращает фактический ответ или объект ошибки.

У меня есть компонент, который должен определять, провалилась ли операция или нет, предпочтительно, подписавшись на действие FETCH_FAILED и отображая сообщение об ошибке в зависимости от типаошибки (404/401 и другие коды состояния) 

export const fetchData = () => {
    return async (dispatch, getState) => {
        const appState = getState();

        const { uid } = appState.appReducer;

        await dispatch(fetchRequested());

        try {
            const response = await LookupApiFactory().fetch({ uid });

            dispatch(fetchSucceeded(response));

            return response;
        } catch (error) {
            dispatch(fetchFailed());

            return error;
        }
    }
}

Я совершенно новичок в редукции и реакции, поэтому я немного не уверен, что я направляюсь в правильном направлении, любая помощьбудет оценена.

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Если предположить редукторы,

для действия FETCH_FAILED, вы можете установить значимый флаг, указывающий на наличие ошибки. На этом флаге вы можете отображать сообщения об ошибках или выполнять другие действия. 

const testReducers =(state,actione)=>{

    case 'FETCH_FAILED' : {

        return {
            ...state,{ error_in_response : true }
        }
    };

    default : return state;
}

В вашем контейнере вы можете получить этот флаг и передать его вашему компоненту.

Предполагая, что combineReducers используется для объединения редукторов; 

const mapStateToProps=(state)=>{

    return {
        error_in_response : state.testReducers.error_in_response
    }
}
connect(mapStateToProps)(yourComponent)

В вашем компоненте это может бытьдоступ с помощью this.props.error_in_response

0 голосов
/ 24 мая 2018

Наиболее распространенным подходом является использование функции connect из библиотеки react-redux.Это HoC, который подписывается на изменения состояния.Взгляните на эту библиотеку, кроме того, она позволяет привязать создателей ваших действий к отправке, что дает вам возможность отправлять ваши действия из компонента.

Вы можете использовать ее следующим образом: 

<code>import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ data, error }) => (
  <div>
    {error && (
      <span>Error occured: {error}</span>
    )}

    {!error && (
      <pre>{JSON.stringify(data, null, 2)}
)} );const mapStateToProps = (state) => ({data: state.appReducer.data, error: state.appReducer.error});экспортировать соединение по умолчанию (mapStateToProps) (MyComponent);

Вы можете использовать условный рендеринг внутри вашего jsx, как я показал выше, или использовать выражение защиты, например: 

<code>const MyComponent = ({ data, error }) => {
  if (error) {
    return (
      <span>Error occured: {error}</span>
    );
  }

  return (
    <pre>
      {JSON.stringify(data, null, 2)}
);}
0 голосов
/ 24 мая 2018

Чтобы реализовать правильный механизм обратного вызова и механизм хранения, у вас должно быть хранилище для хранения всех ваших данных, 

const store = createStore(todos, ['Use Redux'])

затем вы отправляете данные для хранения, 

store.dispatch({
  type: 'FETCH_FAILED',
  text: reposnse.status //Here you should give the failed response from api
});

Затем вы можете получить значение из магазина в любом из ваших компонентов, используя функцию подписки.Он будет вызываться каждый раз, когда отправляется действие, и некоторая часть дерева состояний может потенциально измениться.

store.subscribe(()=>{
  store.getState().some.deep.property
})

Это простая реализация Redux.По мере усложнения вашего приложения вы захотите разделить свою сокращающую функцию на отдельные функции, каждая из которых управляет независимыми частями состояния с помощью combineReducers.Вы можете получить больше информации на сайте redux.js

...