Как сделать фильтр с несколькими параметрами в react redux?

Question

[Quintis]

Доброго времени суток. Компонент Actions должен фильтровать контент в компоненте Filtered используя Redux.Как сделать фильтрацию в компоненте Filtered по выбранных опциях в 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

[Борис Черепанов]

Я так понял вам нужно фильтровать элементы списка.
Если вы храните данные локально то можно пойти двумя путями:
1. Хранить в store два экемпляра фильтра. Превый полный, второй отфильтрованный.
Тогда вы в компонет передаёте только отфильтрованный список.
Вам нужен будет нужен redux-thunk (немного о нём) (или redux-saga). Создайте action creator.
Например с 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

2-й вариант. Получать польный список и список полей со значением в самом компонете и делать последовательно фильтрацию уже там