Redux:在reducer 中过滤数据数组的正确方法是什么? [英] Redux: what is the correct way to filter a data array in reducer?

问题描述

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

i want to filter an array on search SEARCH_TEXT is an on change action what I'm confused with is how i return the state when the delete key is pressed and the text now becomes empty, i figure i could use initial state in the else statement but my inclination is this is wrong? when i return just state it has all ready been manipulated in the if statement.

简单的例子.

提前致谢.

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
      }

推荐答案

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

Remember always that the state is your "source of truth". Be wary of eliminating state on the basis of a temporary filter. Once you do so those items are gone. (The only way to get them back is to reset your state to the initialState, which may not be ideal.)

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

A better approach is to keep your items list as is, and simply store the search text.

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
            });
    }
}

虽然您的州不包含过滤列表，但它会告诉您构建过滤列表所需的一切.

Whilst your state won't contain the filtered list, it tells you everything you need to know to construct the filtered list.

假设您使用的是 React，您的智能组件"可以使用以下 mapStateToProps() 函数进行设置:

Assuming you're using React, your "smart component" can be setup with the following mapStateToProps() function:

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

Should you need this filtered list in more than one place, consider creating a "selector" function, as demonstrated in the Redux shopping cart example. 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));
}

要了解更高级的选择器方法，请查看重新选择库.

For a more advanced approach to selectors, check out the reselect library.

https://github.com/rackt/reselect

这篇关于Redux:在reducer 中过滤数据数组的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！