Как правильно обновить состояние redux с помощью логического значения?

#javascript #reactjs #redux

Вопрос:

У меня есть приложение React с переключателем единиц валюты. У меня есть функция для переключения модуля и обновления redux, чтобы каждый компонент, который вызвал модуль, был повторно отображен. Проблема в том, что параметр redux (storedCurrencyUnit) НЕ ОПРЕДЕЛЕН всякий раз, когда я обновляю значение и вызываю функцию обновления для redux .

Компонент переключения

 import { compose } from 'recompose';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateCurrencyUnit } from '../../store/actions';

class FrontHeader extends Component {

    handleCurrencyChange = (e) => {

        const { updateCurrencyUnit, storedCurrencyUnit } = this.props;
        updateCurrencyUnit(e.target.checked)
        console.log("unit", storedCurrencyUnit) // this is UNDEFINED
        this.setState({ aud: e.target.checked }, () => {
            localStorage.setItem("currencyUnit", this.state.aud ? "AUD" : "USD")
        })
    }

    render() {
       return (
          <Switch
            checked={this.state.aud}
            onChange={this.handleCurrencyChange}
            color="secondary"
            name="aud"
            inputProps={{ 'aria-label': 'currencyUnit' }}
          />
       )
    }
}

const mapStateToProps = (state) => ({
    storedCurrencyUnit: state.storedCurrencyUnit
})

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        updateCurrencyUnit: updateCurrencyUnit,
    }, dispatch);
}

export default compose(connect(mapStateToProps, mapDispatchToProps))(FrontHeader);

currencyReducer.js

 const storedCurrencyUnit = (state = null, action) => {
    switch (action.type) {
        case 'UPDATE_CURRENCYUNIT':
            return action.payload;
        default:
            return state;
    }
}
export default storedCurrencyUnit;

actions.js

 export const updateCurrencyUnit = (updatedCurrencyUnit) => {
    return {
        type: 'UPDATE_CURRENCYUNIT',
        payload: updatedCurrencyUnit,
    }
}

Как я могу это решить?

1. Вы случайно не устанавливали начальное значение для storedCurrencyUnit внутри хранилища Redux? Если нет, то логично, что начальное значение равно undefined . См.: Состояние инициализации Redux

2. Это не имеет никакого отношения к вопросу, но вы также можете удалить compose вызов, поскольку вы указываете только один аргумент. В качестве примера, compose(a, b, c)(obj) это то же a(b(c(obj))) самое, что и, compose(a)(obj) просто a(obj) так connect(mapStateToProps, mapDispatchToProps)(FrontHeader) должно работать просто отлично.

3. Вы подтвердили, что действие отправлено, и в состояние с помощью redux devtools не было внесено никаких / неправильных изменений, можете ли вы добавить информацию из devtools в вопрос? И почему вы копируете storedCurrencyUnit в this.state.aud ?

Ответ №1:

Вам нужно отправить действие с помощью диспетчера. только это будет поддерживать обещание и сообщать о хранилище redux.

 this.props.dispatch(updateCurrencyUnit("some value"));