How to make a filter with multiple parameters in react redux?

Question

React

Good day. The Actions component needs to filter the content in the Filtered component using Redux. How to filter in the Filtered component by selected options in Actions ?

//App.js

import React, { Component } from 'react';
import {Reducer} from './redux/reducer';
import MyActions from './redux/actions';
import Filtered from './redux/Filtered';
import {store} from './redux/reducer';


class App extends Component {
  
  render () {
    let data = store.getState()
    store.subscribe(() => {
      let data = store.getState()
      console.log(data)
      return data
    })
    console.log(data)
    return (
      
        <div className="App">
         
         <Reducer/>
         <MyActions/>
        <Filtered obj={data.newObj}/>
        </div>
      
    );
  }
}

export default App;

//reducer.js
import { createStore } from 'redux'
import React from 'react'

let obj = {
    state:[
        {
            model: "bmv",
            year: 2000,
            type: "diesel"
          },
          {
            model: "bmv",
            year: 2001,
            type: "benzin"
          },
          {
            model: "bmv",
            year: 2003,
            type: "diesel"
          },
          {
            model: "bmv",
            year: 2006,
            type: "benzin"
          },
          {
            model: "bmv",
            year: 1980,
            type: "diesel"
          },
          {
            model: "bmv",
            year: 1999,
            type: "benzin"
          },
          {
            model: "audi",
            year: 2001,
            type: "diesel"
          },
          {
            model: "audi",
            year: 2003,
            type: "diesel"
          },
          {
            model: "audi",
            year: 2007,
            type: "benzin"
          },
          {
            model: "audi",
            year: 1989,
            type: "diesel"
          },
          {
            model: "audi",
            year: 1989,
            type: "benzin"
          },
          {
            model: "audi",
            year: 1993,
            type: "diesel"
          }
    ],
    newObj:[]
}

  ;

console.log(obj);


function counter(state = obj, action) {
    switch (action.type1) {
      case 'FILTER-ACTION':
          const {model, year, type} = action
          console.log(model, year, type)
             function filter(model, year, type) {
              return  state.state.filter(el => {
                    return el.model === model;
                  }).filter(el => {
                    return el.year < year;
                  }).filter(el => {
                    return el.type === type;
                  });
              
             
              }
              let newObj = filter(model, year, type)

             return state = {
                 state:state.state,
                 newObj:newObj
             }
    
      default:
        return state
    }
  }
  
  let store = createStore(counter)
  


 function Reducer() {
    return (
        <div>
            232323
        </div>
    )
}


export   {Reducer,store}

//Actions.js
import React from 'react'
import {store} from './reducer';


function action1(){
    return {
        type1: 'FILTER-ACTION' ,
        model: 'bmv' ,
        year: 2009,
        type: 'benzin'
    }
}


store.dispatch(action1())





export default function Actions() {

   function filterHandler1(e){
        console.log(e.target.value)
        store.dispatch({
            type1: 'FILTER-ACTION' ,
            model: e.target.value ,
            year: 2009,
            type: 'benzin'
        })
    }



    function filterHandler(e){
        console.log(e.target.value)


    }

    return (
        <div >
        <div>
            click on model:
            <select onChange={filterHandler1} >
            <option value="bmv">BMV</option>
            <option value="audi">Audi</option>
            </select>
        </div>
            <div>
            click on year of machine:
            <select onChange={filterHandler} >
            <option value="2009">2009</option>
            <option value="2000">2000</option>
            </select>
            </div>
            <div>
            click on fuel:
            <select onChange={filterHandler}>
            <option value="benzin">benzin</option>
            <option value="diesel">diesel</option>
            </select>
            </div>
            </div>
    )
}

//Filtered.js
import React from 'react';







export default function Filtered({obj}) {
    return (
        <div>
            <h3>List of filtered obj :</h3>
            
            {obj.map((el,i)=>{
                return (
                    <ul key={i}>
                   <li>Machine model : {el.model}</li>
                   <li>Machine year : {el.year}</li>
                   <li>Machine type of engine : {el.type}</li>
                   </ul>
                )
            })}
           
        </div>
    )
}

Answer 1

I understand that you need to filter the elements of the list.
If you store data locally, then you can go in two ways:
1. Store two filter instances in the store. The first is full, the second is filtered.
Then you pass only the filtered list to the component.
You will need redux-thunk ( a bit about it ) (or redux-saga). Create an action creator.
For example with redux-thunk

// signObj - данные для фильтрации
/*
signObj = {
  model: 'audi',
  year: '2007',
  type: "benzin"
}
*/
const filterAction = (signObj) => {
  return (dispatch, getState)=>{
    let filtredList = [ ...getState().noFilterList]; // Не фильтрованный список
    Object.keys(signObj).map((signName)=>{
      filtredList.filter((item)=>( item[signName] ===  signObj[signName]))
    });
    dispatch({ type: SET_FILTRED_LIST, payload: filtredList});  // устанавливает state.filterdList
  }
}

// Можно собирать signObj предварительно в store

2nd option. Get a complete list and a list of fields with a value in the component itself and do sequential filtering already there