【问题标题】:Need some clarifications on some basic setup需要对一些基本设置进行一些说明
【发布时间】:2019-04-03 21:00:07
【问题描述】:
看了几个 Redux 教程后我还有几个问题:
-
创建我的store 后,我有:
ReactDOM.render(, document.getElementById('root'));
进入App 组件,我定义:
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actions, dispatch)
}
state 和 dispatch 来自哪里?这是自动引用store 的状态和调度,因为我将它连接到我的组件?
-
我的一个 React 组件有一个表单,在提交时会调用一个函数:
handleSubmit(event) { ... }
所以在该组件的构造函数中,我有:
constructor() {
super()
this.handleSubmit = this.handleSubmit.bind(this);
}
在声明 React 类组件时是否总是需要调用 super()?
为什么我需要在那里进行这种类型的绑定?
提交该表单后,我发送了一个名为addPost 的操作。
它是如何“去”减速机的?是否只是因为在我创建 store 并使用 mapDispatchToProps(dispatch) 时给出了 reducer,我“让”Redux 知道哪些操作可以分派给该 reducer?
reducer 只返回一个state 对象。实际上将状态“保存”到存储中的逻辑在哪里?隐藏了吗?
【问题讨论】:
标签:
javascript
reactjs
redux
【解决方案1】:
是的,将 state 和 dispatch 分别视为对您的 redux 状态和调度函数的引用。
-
React docs说:
如果您不初始化状态并且不绑定方法,则不需要为您的 React 组件实现构造函数。
为您的处理程序尝试箭头函数:
class MyComponent extends Component {
handleSubmit = () => {
// ...
}
}
reducer 被分配给了 store,store 被分配给 react-redux <Provider> 组件,Provider 组件提供了一个 React context,子组件中的调度动作被所述 reducer 拾取。
该逻辑在 redux 库中。
【解决方案3】:
状态和调度从何而来?自从我将它连接到我的组件后,这是否会自动引用商店的状态和调度?
状态是最难理解的主题之一,当我们开始专注于 Redux 时,它就会出现在前面和中心位置。我们定义的每个基于类的组件都有自己的状态对象。
mapStateToProps 是我们从应用程序级别状态到组件级别的接口能力。它是我们从状态对象中提取属性并将它们注入到我们的组件中的地方。
dispatch 是您更改应用程序状态的方式,dispatch 是一个操作。
在您的实现中,您正在使用bindActionCreators,它将值是动作创建者的对象转换为具有相同键的对象,但每个动作创建者都包装在dispatch调用中,因此可以直接调用它们.
我个人从来没有以这种方式连接 redux 操作,所以我不得不查找这个。
在声明 React 类组件时是否总是需要调用 super()?为什么我需要在那里进行这种类型的绑定?
是的,React 组件总是必须在其构造函数中调用 super 才能正确设置。
要深入了解这种绑定技巧,请从React docs 开始。如果你不是那么喜欢,只要知道在 React 中,每当你定义一个使用this 的事件处理程序时,你都需要将this.methodName = this.methodName.bind(this) 添加到你的constructor 函数中。