Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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? when i return just state it has all ready been manipulated in the if statement.

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       } 
like image 570
user3224271 Avatar asked Nov 30 '15 16:11

user3224271


People also ask

How does Redux know which reducer to use?

If the application's state is managed by Redux, the changes happen inside a reducer function — this is the only place where state changes happen. The reducer function makes use of the initial state of the application and something called action, to determine what the new state will look like.

How do you use reducer in Redux?

Firstly, if you do not set state to 'initialState', Redux calls reducer with the undefined state. In this code example, concat() function of JavaScript is used in 'ITEMS_REQUEST_SUCCESS', which does not change the existing array; instead returns a new array. In this way, you can avoid mutation of the state.

What is the main purpose of a reducer function in Redux?

Introduction. In Redux, a reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer's job to return the new state based on that action.

What is the difference between Redux and reducer?

Redux provides one dispatch function that consumes any action dedicated for any reducer function. The dispatch function from useReducer, in contrast, only deals with actions that are specified by the reducer function to be consumed.


1 Answers

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:

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

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.

https://github.com/rackt/reselect

like image 196
David L. Walsh Avatar answered Oct 07 '22 22:10

David L. Walsh