Redux：在reducer中过滤数据数组的正确方法是什么？

Question

我想在搜索时过滤一个数组 SEARCH_TEXT 是一个更改操作 我感到困惑的是，当按下删除键并且文本现在变为空时，我如何返回状态，我想我可以在 else 语句中使用初始状态，但我的倾向是这是错误的？当我只返回状态时，它已经准备好在 if 语句中进行操作。

简单的例子。

提前致谢。

const initialState =  ['hello', 'wahhh', 'yo'];

export default function searchSimple(state = initialState, action) {
  switch (action.type) {
    case SEARCH_TEXT:
      if(action.text.length > 0){
        return state.filter(item =>
          item.startsWith(action.text)
        )
      }
      else {
        return state
      }

Answer 1

永远记住，国家是你的“真相之源”。谨防基于临时过滤器消除状态。一旦你这样做了，这些项目就消失了。 （让它们恢复的唯一方法是将您的状态重置为初始状态，这可能并不理想。）

更好的方法是保持您的项目列表不变，并简单地存储搜索文本。

const initialState = {
    searchText: '',
    items: [ 'hello', 'wahhh', 'yo' ]
};

export default function searchSimple(state = initialState, action) {
    switch (action.type) {
        case SEARCH_TEXT:
            return Object.assign({}, state, {
                searchText: action.text
            });
    }
}

虽然您的状态不会包含过滤列表，但它会告诉您构建过滤列表所需的所有信息。

假设您使用 React，您的“智能组件”可以使用以下 mapStateToProps() 函数进行设置：

function mapStateToProps(state) {
    const { items, searchText } = state.searchSimple;
    return {
        filteredItems: items.filter((item) => item.startsWith(searchText))
    };
}

如果您在多个地方需要这个过滤列表，请考虑创建一个“选择器”功能，如 Redux 购物车示例中所示。 https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js

看起来像这样：

export function filteredItems(state) {
    const { items, searchText } = state.searchSimple;
    return items.filter((item) => item.startsWith(searchText));
}

有关选择器的更高级方法，请查看重新选择库。

https://github.com/rackt/reselect

Answer 2

IMO，过滤数据的正确位置不是直接在 reducer 中，而是在 selectors 中。

来自 redux 文档：

Computing Derived Data

Reselect 是一个简单的库，用于创建可记忆的、可组合的选择器函数。重新选择选择器可用于有效地计算来自 Redux 存储的派生数据。

我目前正在使用选择器来过滤和排序数据。

1. 状态中没有数据重复。您不必存储已过滤项目的副本。
2. 相同的数据可用于不同的组件，例如，每个组件使用不同的过滤器。
3. 您可以使用应用程序中已有的选择器组合选择器来应用许多数据计算。
4. 如果你做得对，你的选择器将是纯函数，那么你可以轻松地测试它们。
5. 在许多组件中使用相同的选择器。