Предотвращение обновлений компонентов из нескольких реквизитов в реакции

Question

У меня есть приложение response/redux, которое имеет диаграмму recharts, которая анимируется при изменении данных.

Я использую Redux, и большинство моих действий изменяют только одно свойство state, из-за которого получается props проход. Однако некоторые из моих действий теперь используют thunks для некоторых асинхронных действий и вызова других действий.

Например, у меня могло бы быть действие getChartData, которое вызывается, когда пользователь выбирает ось.

export let getChartData = axis => dispatch => { 
    // trimmed for brevity 
    fetchJSON(url).then(data => { 
    dispatch(dataRetrievalSuccess(data)); 
    dispatch(updateSelectedAxis(axis)); 
    }).catch(error => { 
    dispatch(dataRetrievalError(error)); 
    }); 
}; 

В этом примере значение updateSelectedAxis изменит локальную государственную собственность отвечает за отображение выбранной в данный момент оси и функции dataRetrievalSuccess будет нести ответственность за передачу props.data на графику.

Проблема, которую я пытаюсь решить, состоит в том, чтобы предотвратить обновление диаграммы, когда выбранные элементы реквизита selectedAxis изменились, но данных нет.

Я думал, что я мог бы использовать что-то вроде componentWillRecieveProps но вопрос, я здесь с моим выше thunk например, что я получаю один вызов componentWillRecieveProps, когда я звоню dataRetrievalSuccess, который имеет те же данные в обоих this.props.data и nextProps.data так что я может предотвратить обновление. Однако, когда я потом звоню updateSelectedAxis, у меня нет data как часть реквизита, поскольку он уже изменен, поэтому я не могу выполнять логические операции на основе двух значений.

Я думал, что это может быть проблема с заказом, но даже если я упакую это в одно действие, я все равно получаю несколько настроек реквизита.

Могу ли я решить эту проблему путем упаковки данных и изменения оси в один объект? Я не совсем уверен, что это лучший способ сделать это в архитектурном плане и приветствовать любые предложения.

EDIT: Просто немного расширить, я направляю два действия, оба, которые меняют свой собственный бит состояния, которое вызывает два делает.

Я пытался писать что-то вроде этого:

shouldComponentUpdate(nextProps, nextState) { 
    if(this.dataHasChanged(nextProps)) { 
    return true; 
    } 
    return false; 
} 

который почти работает, но каждый раз, когда данные диаграмма показывает один визуализации позади, где она должна быть.

Answer 1

Вы можете получить доступ к текущему состоянию хранилища под создателем действия, используя thunk (поскольку thunk вводит вам состояние). Затем сравните данные ответа ajax с данными предыдущего состояния, чтобы отправить новое действие.

export let getChartData = axis => (getState, dispatch) => { 
      // trimmed for brevity 
      fetchJSON(url).then(data => { 
      if(getState().data !== data){ 
      dispatch(dataRetrievalSuccess(data)); 
      dispatch(updateSelectedAxis(axis)); 
      } 
      }).catch(error => { 
      dispatch(dataRetrievalError(error)); 
      }); 
     };