是什么从 redux 的 reducer 中捕获了这个 return 语句?
What catches this return statement from within the reducer in redux?
在此示例中,我正在监听 DO_SEARCH
操作类型并 returning 操作的有效负载。但是我想在捕捉到 DO_SEARCH
动作类型后做一些事情,但我不能在 reducer 中做,因为它必须是一个纯函数。
export default function (state=null, action) {
switch(action.type){
case 'DO_SEARCH':
return action.payload;
break;
}
return state;
};
我的问题是什么真正抓住了这个 return?
假设我有一个文本框和一个按钮。单击按钮后,我将调用 DO_SEARCH
操作类型。有效负载实际上是文本框中的文本。那么我在哪里可以捕获我刚刚从减速器中 return 编辑的有效负载?
我想对文本框中的文本做一些处理。我实际上把这段代码放在哪里?绝对不在 reducers
内部,因为它们是纯函数。是在我实际实现我的逻辑的组件内部吗?
您可以在容器内处理您的状态。你的减速器所做的是它 returns 你的状态,你可以使用 mapStateToProps
函数在你的容器中捕获它并利用 connect
使该状态可用作你的道具像
这样的组件
import 'reducerText' from '/path/to/reducer';
import {connect} form 'react-redux';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.text);
return (<div>Hello {this.props.text}</div>);
}
}
function mapStateToProps(state) {
return {
text: state.reducerText
}
}
export default connect(mapStateToProps)(App);
在此示例中,我正在监听 DO_SEARCH
操作类型并 returning 操作的有效负载。但是我想在捕捉到 DO_SEARCH
动作类型后做一些事情,但我不能在 reducer 中做,因为它必须是一个纯函数。
export default function (state=null, action) {
switch(action.type){
case 'DO_SEARCH':
return action.payload;
break;
}
return state;
};
我的问题是什么真正抓住了这个 return?
假设我有一个文本框和一个按钮。单击按钮后,我将调用 DO_SEARCH
操作类型。有效负载实际上是文本框中的文本。那么我在哪里可以捕获我刚刚从减速器中 return 编辑的有效负载?
我想对文本框中的文本做一些处理。我实际上把这段代码放在哪里?绝对不在 reducers
内部,因为它们是纯函数。是在我实际实现我的逻辑的组件内部吗?
您可以在容器内处理您的状态。你的减速器所做的是它 returns 你的状态,你可以使用 mapStateToProps
函数在你的容器中捕获它并利用 connect
使该状态可用作你的道具像
import 'reducerText' from '/path/to/reducer';
import {connect} form 'react-redux';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.text);
return (<div>Hello {this.props.text}</div>);
}
}
function mapStateToProps(state) {
return {
text: state.reducerText
}
}
export default connect(mapStateToProps)(App);