Question

我是redux的新手。

我的代码：

主屏幕

<Text> {{this.props.mycity}} </Text> 
const mapStateToProps = function(state) {
    return {
      mycity: state.layersFlag.baseDistrictADhabi //consist true/false 
    }
}

export default connect(mapStateToProps)(HomeScreen);

Sidemenu屏幕：界面

<Switch onValueChange={(flag) => {
   this.props.toggleCity();
} value={this.state.city} /> 

const mapDispatchToProps = dispatch => {
    return {
        toggleCity: () => {
            dispatch({ type: "changeCity" })
        }
    };
};
export default connect(null, mapDispatchToProps)(SideMenuScreen);

存储和减速器设置：

const initialState = {
    city : {
        mycity: true
    }
};

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload.mycity
        })
    default:
        return state;
    }
}

const Store = createStore(reducer);

我被困在菜单中。如何分配mapDispatchToProps方法：

如何在侧边菜单的mapDispatchToProps中传递动作？

Answer 1

如果我对您的Switch组件所做的假设是正确的，那么当您将onValueChange传递给this.state.city道具时，它将触发value事件监听器。您最终致电this.props.toggleCity()来调度您的changeCity操作。我认为这里的设置是正确的...

但是，您的化合器似乎期望使用action.payload，而您从未将其作为操作的一部分传递。

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload.mycity
        })
    default:
        return state;
    }
}

所以是的，调度工作正常，但是您没有传递减速器返回新状态所需的所有必要数据。

您需要将mapDispatchToProps，事件处理程序和化简器更新为类似的内容

<Switch onValueChange={(flag) => {
   this.props.toggleCity(this.state.city);
} value={this.state.city} /> 

const mapDispatchToProps = dispatch => {
    return {
        toggleCity: (myCity) => {
            dispatch({ type: "changeCity", payload: myCity })
        }
    };
};
export default connect(null, mapDispatchToProps)(SideMenuScreen);

您的reducer似乎还有一个额外的密钥，如果有效载荷中的mycity道具已经是有效载荷，则不需要访问它。更新到：

const reducer = (state = initialState, action)=>{
    switch (action.type) {
        case "changeCity":
        return Object.assign({}, state, {
            mycity: action.payload
        })
    default:
        return state;
    }
}

此外，如果您希望Hone组件使用Redux状态下的新数据重新渲染，则可以执行以下操作。

在HomeScreen组件中，使用状态变量来保存您的abudhabi或任何城市值，然后调用componentDidUpdate（）来设置状态并重新呈现组件。

class HomeScreen extends React.Component{
   state = {
      abudhabi: false
   }

//when the component gets the new redux state this will trigger
  componentDidUpdate(prevProps){
     if(this.props.abudhabi !== prevProps.abudhabi){
        this.setState({
           abudhabi: this.props.abudhabi 
       })
     }
  }
}

如何在React Redux中使用mapDispatchToProps

1 个答案: