Question

说我有一个连接到redux商店的组件。在这个商店中，有一个对象列表。比如像这样：

ReduxStore: {
    dataList: [
      {name:'bla'},
      {name:'blub'},
    ]
}

在reducer中创建和添加过滤器函数实际上是一种反模式来创建这样的东西：

ReduxStore: {
   dataList: {
     data:[
      {name:'bla'},
      {name:'blub'}
     ],
     isNameAvailable: (name) => {/* search for name */}
   }
}

效果很好，但我不确定这是否是预定的方式。

Answer 1

它是一种反模式，因为你的商店只关心数据，而不是计算。一旦开始向商店添加功能，就无法序列化其中的数据。

但是，将这些辅助函数拉出来并将它们转换为独立的实用程序选择器是非常简单的，您可以使用它们来实现相同的功能。

function isNameAvailable(store, name) {
  /* search for `name` in `store` */
}

现在该功能独立于商店工作，您可以将它们分开进行测试。

从这里开始，您可以查看Reselect，它可以让您将isNameAvailable功能转换为缓存选择器，这意味着您只需要在需要时重新计算商店中的适当数据已更改。

Answer 2

来自Redux documentation：

减速机保持纯净非常重要。你应该在减速机内做的事情：


改变其论点;

执行API调用和路由转换等副作用;

调用非纯函数，例如Date.now（）或Math.random（）。

所以我想如果你想声明一个过滤函数isNameAvailable，我认为你有两个选择：

使用connect函数过滤

// the solution of connect 

import React, { Component } from 'react';
import { connect } from 'react-redux';

const App = () => (
  <div>the example</div>
);

function isNameAvailable(state) {
  // your code
}

function mapStateToProps(state) {
  return isNameAvailable(state)
}

module.exports = connect(mapStateToProps)(App);

声明一个过滤功能

根据我的经验，我认为第一个更好。我希望这可以帮到你。

在Reducer中为redux存储添加函数是一种反模式？

2 个答案: