如何将Redux实现到已经具有道具的功能组件

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}) => {
....
}

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

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

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

我的redux变量可以工作，但props会有错误

也许这是一个关于在功能组件上设置论点的概念，我不知道，希望有人帮我解释，谢谢。

Answer 1

在这个场景中，您使用的是功能组件，如果您使用的功能组件带有redux，这就是您应该如何从redux和主道具对象访问道具的方式。因为你必须使用排列运算符来获得其余部分。

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

然后你可以分别拥有道具和你的重做道具。

如果你需要一个扩散操作的参考来区分道具。https://reactjs.org/docs/jsx-in-depth.html#spread-属性