Получить последнее состояние Redux в React сразу после изменения состояния

Question

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

// Action
export const setMyState = (value) => {
  return {
    type: 'SET_STATE',
    payload: value
  };
};

// Reducer
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SET_STATE':
      return { myState: action.payload }
  }
}

Когда я устанавливаю состояние через действие в моем компоненте реагирования и немедленно вызываю это состояние изПривязка к редуксу реквизита, я не получаю текущее состояние:

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    this.props.setMyState('value');
    console.log(this.props.myState);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);

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

1. Выясните, как обновлять состояние Redux в React сразу после изменения состояния

2. Запустить избыточное действие ввместо этого редуктор, который звучит как анти-паттерн .

3. Установить какое-либо состояние в моем компоненте или уменьшить, чтобы действие запускалось при следующем рендере, что выглядит неуклюже.

Answer 1

Мое решение состоит в том, чтобы использовать цикл обработки событий, а не стек вызовов.В частности, для вашего случая вы должны включить setTimeout (() => {});следующим образом:

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    setTimeout(() => { this.props.setMyState('value'); },0);
    setTimeout(() => { console.log(this.props.myState); },0);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);

Answer 2

сконфигурируйте ваш редуктор как:

switch (action.type) {
  case 'SET_STATE':
    return {
      ...state,
      loading: true,
    };

  case 'SET_STATE_SUCCESS':
    return {
      ...state,
      loading: false,
      payload: value
    };
}

и затем в вашем компоненте прослушайте

this.props.myState.loading

, затем запустите ваше действие, если (загрузка) и так далее!

Answer 3

Для чего вы используете это состояние Redux?

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

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

Лучшим способом сделать это, вероятно, было бы использование промежуточного программного обеспечения Redux .