Question

我是Redux的新手，我遇到了一个问题。当我完成了必要的redux配置后（例如connect，mapStateToProps，mapDispatchToProps）

const mapStateToProps = (state) => ({
    dayPlanner: state.dayPlanner,
});
const mapDispatchToProps = (dispatch) => ({
    onMounted: (dayPlanner) => dispatch(createDayPlanner(dayPlanner)),
});
export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

然后将值作为参数放置到我的功能组件中

const MainPage = ({onMounted, dayPlanner}) => {
....
}

结果运行良好，这意味着我定义的onMounted和dayPlanner都具有我期望的期望值，但是我发现，如果我要在已经以props作为参数的组件上实现该期望值，进入未定义状态

const MainPage = (props,{onMounted, dayPlanner}) => {
....
}

所以我不确定是否是因为您不应该在已经依赖props的组件中实现它，还是有办法解决我的问题？

我发现，如果我像这样切换参数顺序

const MainPage = ({onMounted, dayPlanner},props) => {
    ....
}

我的redux变量可以工作，但是道具会出错

也许这是在我不了解的功能组件上设置参数的概念，希望有人帮我解释一下，谢谢。

Answer 1

在这种情况下，您正在使用功能组件，并且如果您将功能组件与redux一起使用，这就是应该从redux和主要prop对象访问props的方式。因为您必须使用价差运算符来获取其余的值。

const MainPage = ({onMounted, dayPlanner,...props}) => {
     console.log(props)
    ....
}

然后，您可以同时拥有道具和redux道具。

如果您需要传播操作的参考来区分道具。 https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

如何对已经具有道具的功能组件实施Redux？

1 个答案: