Ошибка: действия должны быть простыми объектами. Но я не использую asyn c звонки

Question

SwitchActions. js

 import HANDLE_SWITCH from './SwitchActionTypes'

 export const toggleSwitchButton = event =>     ({
    type: HANDLE_SWITCH.TOGGLE_SWITCH,
    payload: event
})

SwitchTypes. js

const HANDLE_SWITCH = {
    TOGGLE_SWITCH: 'TOGGLE_SWITCH'
}

export default (HANDLE_SWITCH)

SwitchReducer

import HANDLE_SWITCH from './SwitchActionTypes'

const INITIAL_STATE = {
    A: true,
    B: false,
    C: false,
    D: false,
    E: false,
}

const switchReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case HANDLE_SWITCH.TOGGLE_SWITCH:
            return {
                ...state, 
                [action.name]: action.event
                }
        default: 
            return {...state}
    }
}

export default switchReducer

SwitchComponent

import React from 'react';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import { makeStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux'
import { toggleSwitchButton } from '../../Redux/Switch/SwitchActions'

const useStyles = makeStyles(theme => ({
    root: {
        color: 'white',
    },
}));

function SwitchLabels({ switchState,  toggleSwitch }) {

    const classes = useStyles()

    return (
        <FormGroup>
            <FormControlLabel
                control={
                    <Switch checked={switchState.A} onChange={toggleSwitch('A')} value="A" />
                }
                label="Data Plot"
                classes={{
                    root: classes.root
                }}
            />
            <FormControlLabel
                control={
                    <Switch
                        checked={switchState.B}
                        onChange={toggleSwitch('B')}
                        value="B"
                        color="secondary"
                    />
                }
                classes={{
                    root: classes.root
                }}
                label="Linear Regression"
            />
        </FormGroup>
    );
}

const mapDispatch = dispatch => {
    return {
        toggleSwitch: (event) => dispatch(toggleSwitchButton)(event)
    }
}

const mapState = (state) => {
    const switchState = state
    return {switchState}
}

export default connect(mapState, mapDispatch)(SwitchLabels)

Я даже не использую asyn c звонки. 'mapState' работает правильно, но всякий раз, когда я нажимаю эту кнопку, она возвращает эту ошибку. Я использую компонент Switch из Material-ui https://material-ui.com/components/switches/#switches -with-formcontrollabel Кто-нибудь поможет?

Answer 1

Ваш синтаксис отправки неверен:

(event) => dispatch(toggleSwitchButton)(event)

То есть передача создателя действия toggleSwitchButton в dispatch вместо вызова toggleSwitchButton() и передача полученного объекта действия в dispatch.

Это должно быть:

(event) => dispatch(toggleSwitchButton(event))

Однако мы настоятельно рекомендуем использовать форму "сокращение от объекта" mapDispatch вместо:

const mapDispatch = {toggleSwitch: toggleSwitchButton};

Кроме того, вы неправильно используете внутри компонента:

onChange={toggleSwitch('B')}

Это вызовет toggleSwitch() и отправит действие, когда компонент находится в середине рендеринга. Вместо вам нужно передать ссылку на функцию, которая передаст правильный параметр при нажатии :

onChange={ () => toggleSwitch('B')}