将逻辑移动到新的动作中

Question

我有一些组件。该组件包含方法 "componentWillReceiveProps"。该方法大致包含以下逻辑：

componentWillReceiveProps(nextProps) {
    if (this.props.someObject.obj1.prop1 != nextProps.someObject.obj1.prop1
      || this.props.someObject.obj2.prop2 != nextProps.someObject.obj2.prop2) {
      this.props.doAction1(nextProps.someObject);     
    }
    //any code
  }

"this.props.doAction1" - 是行动。

如果我创建新动作并将此逻辑移动到新动作中可以吗？

例如：

function newAction(current, new){
    if (current.obj1.prop1 != new.obj1.prop1
      || current.obj2.prop2 != new.obj2.prop2) {
      doAction1(new);     
    }
}

并修改componentWillReceiveProps:

componentWillReceiveProps(nextProps) {    
    this.props.newAction(this.props.someObject, nextProps.someObject);
    //any code
  }

Answer 1

因此，如果您想将 newAction 和 doAction1 作为 props 发送到组件，那么您所写的内容是正确的。从您的代码来看，我认为将 'newAction' 定义为组件的功能可能会更好。只需在您的组件中定义它并绑定它。它应该被调用为 'this.newAction' 您也可以像这样将它绑定到您的组件：

newAction = (current, new)=>{
if (current.obj1.prop1 != new.obj1.prop1
  || current.obj2.prop2 != new.obj2.prop2) {
  doAction1(new);     
 }
}

Answer 2

我认为您使用术语 action 的方式有误。行动应该激发减速器的更新。不是组件逻辑，所以它应该是组件的一个方法，或者如果你愿意的话，它应该只是一个函数。
如果你真的是想说动作——不要在 componentWillReceiveProps 中使用它（这根本就是错误的模式）。在这种情况下，您冒着获得
的风险
- 应用程序的递归更新
- 状态逻辑混乱
- 状态不一致
所以如果你想在一些对象被改变（通过 reducer）时触发状态更新（调用 reducer）——你最好在 reducer 中进行（如果对象在其他 reducer 中更新） ——你可以使用 redux-thunk / redux-saga）。此外，最好只为所有这些更改调用一个操作，以确保状态的一致性。

总结：

操作应该激发状态的原子更新。如果您正在编写许多不知道您要更改的其他对象的 reducer — 使用 redux-thunk 或 redux-saga，为 reducer 准备数据并仅调用一个操作，应该使用在一些减速器中。

不要将更新状态的逻辑移动到组件中（这与您使用 MVC 并从视图更新模型相同）。

Answer 3

如果 doAction1 是一个 redux 动作创建者，你不能调用它而不用 dispatch 包装它。直接调用 doAction1(...) 不会触发你的减速器。

大概您已经使用 mapDispatchToProps 接收 doAction1 作为组件的属性，因此可以像这样调用它：this.props.doAction1(...)。也就是说，this.props.doAction1 本质上是 dispatch 包装 doAction1.

所以如果我的理解是正确的，你想要这样的东西：

一种进行比较并将您的操作作为回调进行分派的方法

// the 'newAction' method
function checkAndDispatch(current, new, callback){
  if (current.obj1.prop1 != new.obj1.prop1
    || current.obj2.prop2 != new.obj2.prop2) {
    callback(new);     
  }
}

在你的组件中：

componentWillReceiveProps(nextProps) {    
  checkAndDispatch(this.props.someObject, nextProps.someObject, this.props.doAction1);
  // ...
}

思考点：

在 Redux 中，动作创建者是 return 具有 type 键的对象的函数。 type 是目标减速器。
要触发目标 reducer，action creator 在被调用时应该用调度包装。

将逻辑移动到新的动作中

Move the logic into new action

reactjs

redux

react-redux