【问题标题】:What catches this return statement from within the reducer in redux?什么从redux 的reducer 中捕获了这个return 语句?
【发布时间】:2016-12-22 17:56:04
【问题描述】:

在此示例中,我正在侦听 DO_SEARCH 操作类型并返回操作的有效负载。但是我想在我捕捉到DO_SEARCH 动作类型之后做一些事情,我不能在reducer里面做,因为它必须是一个纯函数。

export default function (state=null, action) {
    switch(action.type){
        case 'DO_SEARCH':
           return action.payload;
           break;
    }
    return state; 
};

我的问题是什么真正抓住了这个回报?

假设我有一个文本框和一个按钮。单击按钮后,我正在调用 DO_SEARCH 操作类型。有效负载实际上是文本框中的文本。那么我在哪里捕获我刚刚从减速器返回的这个有效载荷?

我想对文本框中的文本做一些事情。我实际上将这段代码放在哪里?绝对不在reducers 内,因为它们是纯函数。是在我实际实现我的逻辑的组件内部吗?

【问题讨论】:

  • 为什么这不是一个纯函数?
  • @Scimonster 我刚刚编辑了我的问题。 :)
  • 你想做什么样的事情?
  • @Scimonster 将文本与大量其他文本进行比较。搜索类型的东西
  • 那么为什么不能在 reducer 中完成呢?

标签: redux react-redux


【解决方案1】:

您可以在容器内处理您的状态。你的 reducer 所做的是它返回你的状态,你可以使用 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);

【讨论】:

  • 所以我把我的逻辑放在容器里了?说onClick函数
  • 是的,你可以这样做,这次你使用 reducer 状态作为道具
猜你喜欢
  • 2016-01-24
  • 2016-05-26
  • 2014-12-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-16
  • 1970-01-01
相关资源
最近更新 更多