如何使用布尔值正确更新 redux 状态？

Question

I have a React app with a currency unit switch. I have a function to switch the unit and update redux so that every component that has called the unit will be re-rendered. The problem is the redux prop (storedCurrencyUnit) is UNDEFINED whenever I updated the value and call the update function to redux.

Switch component

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,
    }
}

How can I solve this?

Answer 1

You need to dispatch the action using dispatcher. only that will maintain the promise and let know the redux store.

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