时间戳

首页 > 解决方案 > 在 Redux 中从组件向 Action Creator 传递数据

redux - 在 Redux 中从组件向 Action Creator 传递数据

问题描述

我试图通过将级别 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); ```

动作创建者


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

标签： reduxreact-redux

解决方案

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

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

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

推荐阅读