CODEWITHSUNDEEP
reactjsredux
renanrider
renanrider

Reputation: 94

Multiple filters in react with pagination using Redux

Expectations:

Filter and query some data using react and redux.

enter image description here

I have 3 scenarios:

  1. Call api with values from search box (the search box is present in another routes and to get the value for using in search i extract the value from url)
  2. Call api with values from filter buttons (When onChange occur i change the value with useState)
  3. Call api with default values

ex methods:

When the page loads, the default search if keyword was not present is default() and if user scroll the page the api calls with paginate. If the user enter values in the search box, the values from Redux store are reseted and the variable offset are reset because the type of search are changed. If the user click in the tags filter, the values from Redux store also are reseted and the variable offset are reset because the type of search are changed.

The problem:

How i can execute all the types of search with paginate with the current type of search?

Code

  useEffect(() => {
    if (keyword) {
      searchKeyword(keyword);
    } else {
      searchTags();
      searchDefault();
    }
  }, [keyword, searchDefault, searchKeyword, searchTags

]);

Upvotes: 0

Views: 419

Answers (1)

Marcel
Marcel

Reputation: 51

If I'm understanding this correctly, you wouldn't necessarily need to have a default() since it's just whatever value is in the Redux store. You can set the default value of the keyword in the store so that it calls the default api.

useEffect( () => {

//keyword's default value is defined in the redux store
//so we don't need to do an if statement
searchKeyword(keyword);

Also, don't try and use useEffect() for imperative state changes like this, you're better off using it for data that's constantly changing like for a subscription. If you want to execute the search in a way better way you could have a button that just dispatches a new state to Redux and your page will automatically re-render instead of having to put logic inside of useEffect().

You should also have a temp keyword state that's not connected to Redux in case you don't have such a state. You'd want something like this to dispatch your states

const jsxButton = (<button onClick={tagAndKeywordDispatchHandler}</button>)

const tagAndKeywordDispatchHandler = () =>
{
    dispatch(setKeyword(tempKeyword));
    dispatch(setTag1(tag1));
    dispatch(setTag2(tag2));
    dispatch(setTag3(tag3));
}

Upvotes: 2

Related Questions