How should filtering be properly done on a data array within a Redux reducer function?

Question

How should filtering be properly done on a data array within a Redux reducer function?

I am trying to develop a function that filters an array based on a search input. The goal is for the filter action to trigger when there's a change in the SEARCH_TEXT. However, I'm facing confusion when it comes to handling the state when the delete key is pressed and the text field becomes empty. My initial thought was to use the initial state in the else statement, but I have doubts about whether this approach is correct or not. Returning just the state seems ineffective as it has already been manipulated in the if statement.

Here is a simple example:


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

javascript redux

Answer 1

Answer №1

Always keep in mind that the state serves as your ultimate "source of truth". Avoid discarding state based on a temporary filter, as once you do, those items are permanently removed. (To retrieve them, you would need to reset your state to the initialState, which may not be the preferred solution.)

A more effective approach is to retain your items list as it 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
            });
    }
}

Although the filtered list is not stored in your state, the state provides all the necessary information to generate it.

If you are using React, you can set up your "smart component" with the following mapStateToProps() function:

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

If you require this filtered list in multiple places, consider creating a "selector" function, similar to the Redux shopping cart example shown at https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js

The selector function could be defined as follows:

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

To explore a more advanced approach to selectors, take a look at the reselect library at https://github.com/rackt/reselect

Answer 2

Always keep in mind that the state serves as your ultimate "source of truth". Avoid discarding state based on a temporary filter, as once you do, those items are permanently removed. (To retrieve them, you would need to reset your state to the initialState, which may not be the preferred solution.)

A more effective approach is to retain your items list as it 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
            });
    }
}

Although the filtered list is not stored in your state, the state provides all the necessary information to generate it.

If you are using React, you can set up your "smart component" with the following mapStateToProps() function:

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

If you require this filtered list in multiple places, consider creating a "selector" function, similar to the Redux shopping cart example shown at https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/cart.js

The selector function could be defined as follows:

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

To explore a more advanced approach to selectors, take a look at the reselect library at https://github.com/rackt/reselect

Answer 3

Answer №2

Personally, I believe that the most appropriate location to filter data is within the selectors rather than directly in the reducers.

As stated in the Redux documentation:

Computing Derived Data

Reselect is a straightforward library for generating memoized, composable selector functions. Reselect selectors can efficiently compute derived data from the Redux store.

Currently, I am utilizing selectors to apply filtering and sorting to the data.

Avoids data duplication in the state. No need to store duplicate copies of filtered items.
Enables the same data to be utilized in various components with different filters, if needed.
Allows for combining selectors to perform multiple data computations with existing application selectors.
If implemented correctly, selectors become pure functions which are easily testable.
Reusing the same selector across multiple components increases efficiency.

Answer 4

Personally, I believe that the most appropriate location to filter data is within the selectors rather than directly in the reducers.

As stated in the Redux documentation:

Computing Derived Data

Reselect is a straightforward library for generating memoized, composable selector functions. Reselect selectors can efficiently compute derived data from the Redux store.

Currently, I am utilizing selectors to apply filtering and sorting to the data.

Avoids data duplication in the state. No need to store duplicate copies of filtered items.
Enables the same data to be utilized in various components with different filters, if needed.
Allows for combining selectors to perform multiple data computations with existing application selectors.
If implemented correctly, selectors become pure functions which are easily testable.
Reusing the same selector across multiple components increases efficiency.

How should filtering be properly done on a data array within a Redux reducer function?

Answer №1

Answer №2

Similar questions

Tips for stopping PHP echo from cutting off a JS string?

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

Retrieving the selected date from mat-datepicker into a FormControl

Implementing restify on a website that mandates user login authentication

What is the most efficient way to use jQuery to retrieve the count of tags associated with a variable

End the child process.execution after a specific amount of time

What is the best way to process an API call entirely on the server without revealing it to the client?

Establishing a standard flatiron-director route (within the element) using the polymer core-pages component

Difficulty arises when transferring files in Node.js from one directory to another

Is it possible to use useDispatch asynchronously multiple times?

Is there a way for me to determine when the modal animation has completed?

How can jQuery be utilized to dynamically update the text in a navbar?

The use of "app.use("*") appears to be triggering the function repeatedly

Implement ES6 classes for managing state in the vuex store within a Nuxt application

Navigating through the map function within Protractor

Using a carousel component in Bootstrap

Tips for employing numerous if-else conditions utilizing the ternary operator in jsonpath-plus?

Utilize JSON data from a service to populate a Bootstrap Modal

Handling MySQL insertIds and errors in Node.js using MySQL is a crucial aspect of

"Can you provide guidance on displaying a form for a specific element based on its unique ID