[英]Redux: what is the correct way to filter a data array in reducer?
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?我想在搜索时过滤一个数组 SEARCH_TEXT 是一个更改操作 我感到困惑的是我如何在按下删除键并且文本现在变为空时返回状态,我想我可以在 else 语句中使用初始状态但我的倾向是这是错误的吗? when i return just state it has all ready been manipulated in the if statement.当我返回 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
}
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.如果您需要在多个地方使用此过滤列表,请考虑创建一个“选择器”功能,如 Redux 购物车示例中所示。 https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js 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 库。
https://github.com/rackt/reselect https://github.com/rackt/reselect
IMO, the right place to filter data is not directly in the reducers but in the selectors . IMO,过滤数据的正确位置不是直接在减速器中,而是在选择器中。
From redux docs:来自 redux 文档:
Reselect is a simple library for creating memoized, composable selector functions. Reselect是一个简单的库,用于创建记忆化的、可组合的选择器函数。 Reselect selectors can be used to efficiently compute derived data from the Redux store.重选选择器可用于高效地计算来自 Redux 存储的派生数据。
I'm currently using selectors to filter and sort data.我目前正在使用选择器来过滤和排序数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.