如何在Immutablejs和Redux和Flux和React中设置Ember之类的计算属性 [英] How to setup Ember like computed properties in Immutablejs and Redux and Flux and React

问题描述

我习惯于在 Ember对象模型中计算属性.这是一种方便的方法来指定依赖于其他属性的计算属性.

说fullName取决于firstName和lastName，我可以将计算的属性设置为函数computeProperties，并在每次进行更改时调用computeProperties.

示例:

function computeFullName(state) {
  const fullName = state.get('firstName') + state.get('lastName');
  const nextState = state.set('fullName', fullName);
  return nextState;
}

function computeProperties(state) {
  const nextState = computeFullName(state);
  return nextState;
}

// store action handler
[handleActionX](state) {

  let nextState = state.set('firstName', 'John');
  nextState = state.set('lastName', 'Doe');

  nextState = computeProperties(nextState);

  return nextState;
}

有没有一种方法可以自动设置计算属性，从而不必每次都调用额外的函数.在Redux或ImmutableJS中.

解决方案

Redux作者在这里！

按照WildService的建议使用重新选择是可行的方法.我认为我们不会将其包含在内核中，因为reselect可以很好地完成它的工作，并且可以将其作为单独的库使用.

我想注意几件事:

• 即使重新选择，您也不想在化简器中计算数据.选择器应在减速器管理的状态下运行.换句话说，选择器是Redux存储状态和组件之间的步骤-它们不在化简器之内.将Redux状态保持标准化是很重要的，这样很容易更新.

• 我们实际上鼓励您在相关的化简器中定义选择器 ，以便在更改状态形状时不必更改组件 -他们将改为使用选择器.您可以在磁通比较"的Redux文件夹中看到一个示例.

• 我们有一个文档页面，其中介绍了重新选择并描述了如何将其用于计算派生数据.签出来.

I am used to computed properties in Ember Object Model. It's a convenient way to specify computed properties that depend on other properties.

Say fullName depends on firstName and lastName, I can setup computed properties as a function computeProperties and call computeProperties each time I make a change.

Example:

function computeFullName(state) {
  const fullName = state.get('firstName') + state.get('lastName');
  const nextState = state.set('fullName', fullName);
  return nextState;
}

function computeProperties(state) {
  const nextState = computeFullName(state);
  return nextState;
}

// store action handler
[handleActionX](state) {

  let nextState = state.set('firstName', 'John');
  nextState = state.set('lastName', 'Doe');

  nextState = computeProperties(nextState);

  return nextState;
}

Is there a way to automatically setup computed properties so that I don't have to call extra functions each time. In Redux or in ImmutableJS.

解决方案

Redux author here!

Using reselect as suggested by WildService is the way to go. I think we won't include this in core because reselect does its job well and we're fine with it being a separate library.

I wanted to note a couple of things:

• Even with reselect, you don't want to compute data inside your reducer. Selectors should operate on the state managed by reducers. In other words, selectors are the step between your Redux store state and your components—they are not inside your reducers. It is essential you keep Redux state normalized so it's easy to update.

• We actually encourage you to define selectors alongside the relevant reducers, so that when you change the state shape, you don't have to change your components—they would be using the selectors instead. You can see an example of this in the Redux folder of Flux Comparison

• We have a documentation page introducing reselect and describing how to use it for computing derived data. Check it out.

这篇关于如何在Immutablejs和Redux和Flux和React中设置Ember之类的计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！