Действие Redux обновляет состояние, но затем оно немедленно возвращается к нулю? - PullRequest
Новая
       30

Действие Redux обновляет состояние, но затем оно немедленно возвращается к нулю?

0 голосов
/ 03 октября 2018

Я пытаюсь выбрать случайный объект из коллекции и обновить состояние его значениями;все это делается в редуксе.Проблема, с которой я сталкиваюсь, заключается в том, что я получаю свой случайный объект, но как только действие завершается, состояние возвращается к нулю.Вот что я делаю:

1) Я создал файл действий с одной функцией.Как только кнопка приложения нажата, это действие запускается. 

import { mapData } from '../../mapData';

export const getRandomMap = (mapPlayerCount) => dispatch => {
  // get a collection of 1v1, 2v2, 3v3, or 4v4 maps based on the map player count
  const maps = Object.values(mapData).filter(map =>
    map.players === mapPlayerCount
  );

  const min = 0;
  const max = maps.length;
  const randomIndex = Math.floor(Math.random() * (max - min + 1)) + min;
  dispatch({ type: 'GET_RANDOM_MAP', randomMap: maps[randomIndex] });
}

2) Диспетчер переносит меня в файл редуктора, который обновляет состояние. 

const INITIAL_STATE = {
  randomMap: null
};

const mapReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'GET_RANDOM_MAP': {
      return {
        ...state,
        randomMap: action.randomMap
      };
    };

    default: {
      return state;
    };
  };
};

export default mapReducer;

3) И этоэто фактический экран с кнопкой, который запускает действие (усеченный несвязанный код) 

import { getRandomMap } from '../redux/actions/map_actions';
import { connect } from 'react-redux';

class RandomMapPickerScreen extends Component {
  state = {
    ...
  }

  handleSelection = (selectedIndex) => {
    ...
  }

  handleRandomMapRequest = () => {
    switch (this.state.selectedIndex) {
      case 0: {
        // 2 player maps / 1v1
        this.props.getRandomMap(2);
        break;
      }
      case ...
    }
    console.log(this.props.randomMap)

    //this.setState({ showPropThumbnail: false })
  }

  render() {
    ...
  }
}

const mapStateToProps = state => ({
  randomMap: state.map.randomMap
});

export default connect(mapStateToProps, {
  getRandomMap
})(RandomMapPickerScreen);

const styles = StyleSheet.create({...});

Позвольте мне показать вам то, что я вижу в отладчике: 1) Я нажимаю кнопку, и это приводит меня кдействие enter image description here enter image description here

2) Приложение проходит через все редукторы и корректно обновляет состояние с новым значением randomMap enter image description here

3) Затем он возвращает меня к экранному файлу, и я ясно вижу randomMap с правильным значением enter image description here

4)отправка выполняется в моем файле действий enter image description here

5) Код возвращает меня к файлу основного экрана, однако на этот раз randomMap имеет значение NULL по умолчанию ... Почемуэто происходит?Не должен ли мой randomMap сохранить значение?enter image description here

1 Ответ

0 голосов
/ 03 октября 2018

Вы пытаетесь просмотреть содержимое реквизита сразу после отправки действия?Если это так, у React еще не было возможности перерисовать компонент, поэтому у пропа будет прежнее значение.

Концептуально это очень похоже на попытку просмотреть содержимое права на изменение состояниявпоследствии, как: 

// assume it's previously {a : 1}
this.setState({a : 42});
console.log(this.state.a) // 1, not 42

Поскольку setState() обычно асинхронный.

...