在 Redux 中从组件向 Action Creator 传递数据答案

【问题标题】：Passing Data to Action Creator from Component in Redux在 Redux 中从组件向 Action Creator 传递数据
【发布时间】：2020-02-06 16:50:17
【问题描述】：

我正在尝试通过将级别 13 传递给我的动作创建器来更改缩放级别。

但是得到这个错误：

错误：给定动作“ZOOM_SELECTED”，reducer “zoom”返回未定义。要忽略某个操作，您必须显式返回之前的状态。如果你希望这个 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); ```

动作创建者


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

【问题讨论】：

标签： redux react-redux

【解决方案1】：

问题出在mapDispatchToProps - 您没有将缩放传递给回调中的操作。你需要这样做：

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

没有它，不会传递任何参数，并且有效负载的值为undefined。由于您直接在 reducer 中返回有效负载，因此看起来好像没有返回任何内容。

【讨论】：