Передача данных в Action Creator из компонента в Redux

Question

Я пытаюсь изменить уровень масштабирования, передав уровень 13 своему создателю действий.

Но получаю эту ошибку:

Ошибка: данное действие "ZOOM_SELECTED", reducer " зум "возвращается неопределенным. Чтобы игнорировать действие, вы должны явно вернуть предыдущее состояние. Если вы хотите, чтобы этот редуктор не содержал значения, вы можете вернуть null вместо undefined.

Знаете ли вы, как изменить текущее состояние, передав новый уровень масштабирования моему создателю действий?

    render() {
        console.log(this.props.zoom)
        return (
            <div>
                <Map className='map' center={this.props.mapCenter} zoom={this.props.zoom}>
                    <TileLayer
                    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={this.props.mapCenter}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
                </Marker>

                </Map> <button onClick={() => this.props.selectZoom((13))} >Ändra zoom</button>
            </div >
        )

    }
};

const mapStateToProps = (state) => {
    return {
        zoom: state.zoom,
        mapCenter: state.mapCenterPosition
    }
};

const mapDispatchToProps = dispatch => {
    return {
        selectZoom: () => dispatch(selectZoom())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MapComponent); ```

Action Creator

export const selectZoom = (zoom) => {
    console.log('action',zoom)
    return {
        type: 'ZOOM_SELECTED',
        payload: zoom
    };
};

Редуктор

const zoomReducer = (state = 8, action) => {
   if(action.type === 'ZOOM_SELECTED') {
       return action.payload;
   } else {
       return state;
   }
};

Answer 1

Проблема в mapDispatchToProps - вы не передаете масштаб действия в обратном вызове. Вам необходимо сделать следующее:

const mapDispatchToProps = dispatch => {
    return {
        selectZoom: (zoom) => dispatch(selectZoom(zoom))
    }
}

Без него аргумент не передается, а полезная нагрузка имеет значение undefined. Поскольку вы возвращаете полезную нагрузку непосредственно в редуктор, создается впечатление, что она ничего не возвращает.