Javascript Redux：在reducer 中过滤数据数组的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34003553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redux: what is the correct way to filter a data array in reducer?
提问by user3224271
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.
我想在搜索时过滤一个数组 SEARCH_TEXT 是一个更改操作 我感到困惑的是我如何在按下删除键并且文本现在变为空时返回状态，我想我可以在 else 语句中使用初始状态但我的倾向是这是错误的吗？当我返回 just state 时，它已准备好在 if 语句中进行操作。
simple example.
简单的例子。
thanks in advance.
提前致谢。
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
}
回答by David L. Walsh
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.
虽然您的状态不会包含过滤列表，但它会告诉您构建过滤列表所需的一切。
Assuming you're using React, your "smart component" can be setup with the following mapStateToProps()function:
假设您正在使用 React，您的“智能组件”可以使用以下mapStateToProps()函数进行设置：
function mapStateToProps(state) {
const { items, searchText } = state.searchSimple;
return {
filteredItems: items.filter((item) => item.startsWith(searchText))
};
}
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
如果您需要在多个地方使用此过滤列表，请考虑创建一个“选择器”功能，如 Redux 购物车示例中所示。 https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js
It would look something like this:
它看起来像这样：
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.
如需更高级的选择器方法，请查看 reselect 库。
回答by Horacio Alexandre Fernandes
IMO, the right place to filter data is not directly in the reducers but in the selectors.
IMO，过滤数据的正确位置不是直接在减速器中，而是在选择器中。
From redux docs:
来自 redux 文档：
Reselectis a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.
Reselect是一个简单的库，用于创建记忆化的、可组合的选择器函数。重选选择器可用于高效地计算来自 Redux 存储的派生数据。
I'm currently using selectors to filterand sortdata.
我目前正在使用选择器来过滤和排序数据。
- No data repetition in the state. You don't have to store a copy of the filtered items.
- The same data can be used in different components, each one using a different filter for example.
- You can combine selector applying many data computations using selector that you already have in the application.
- If you do right, your selectors will be pure functions, then you can easily test them.
- Use the same selector in many components.
- 状态中没有数据重复。您不必存储过滤项目的副本。
- 相同的数据可以用于不同的组件，例如，每个组件都使用不同的过滤器。
- 您可以使用应用程序中已有的选择器组合应用许多数据计算的选择器。
- 如果你做对了，你的选择器将是纯函数，那么你可以很容易地测试它们。
- 在许多组件中使用相同的选择器。
