В рамках проекта я делаю фильтр с использованием redux. Есть компонент со списком товаров и есть компонент с фильтром. Должна быть возможность фильтровать список товаров по стилю и по полу. В настоящий момент столкнулся с следующей ситуацией - при первой попытке отфильтровать по полу (например выбираю мужской), ничего не происходит, при втором действии с фильтром (например снимаю метку "Мужской") происходит обновление состояния в соответствии с первой попыткой - фильтр по полу снят, но список товаров отфильтрован по категории "Мужской". Проверял - это не проблема рендеринга, почему-то состояние обновляется именно таким образом.
Редюсер:
let initState = {
styles: [],
gender: []
}
const productFiltersReduser = (state = initState, action) =>{
switch(action.type){
case "CHANGE-FILTERS":
return {...state, styles: action.value.styles, gender: action.value.gender};
default: return state;
}
}
export default productFiltersReduser;
Действие:
const changeFilters = (filters) =>{
return{
type: "CHANGE-FILTERS",
value: filters
}
}
export default {changeFilters};
Компонент с фильтром:
import React, {Component} from 'react';
import style from './product-filters.module.css';
import {connect} from "react-redux";
import produts from '../../../../store/mainPageStore/actions/productFilters.js';
class ProductFilters extends Component{
createFilter = (name, values) => {
let options = this.createFilterOptions(values);
return <div className={style.filter}>
<p className={style.filter_name}>{name}
<img className={style.filter_arrow} src={require("./img/filter-arrow.svg")}/></p>
<ul className={style.options_container}>{options}</ul>
</div>;
}
createFilterOptions = (options) =>{
return options.map(option=>{
return(
<li className={style.option}>{option}</li>
)
});
}
renderFilters = (filters) =>{
return filters.map(filter =>{
return this.createFilter(filter.name, filter.values);
});
}
renderProductFilters = this.renderFilters(this.props.filters);
toggleFilterOptions = (event) =>{
if(event.target.className==style.filter_name){
event.target.parentElement.children[1].style.opacity = window.getComputedStyle(event.target.parentElement.children[1]).opacity==0?1:0;
}else if(event.target.classList.contains(style.option)){
event.target.classList.toggle(style.active_option);
this.props.dispatch(products.changeFilters(this.changeFilters()));
this.props.updateDesigners();
}
}
changeFilters = () =>{
let stylesFilters = [];
let genderFilters = [];
let stylesActiveFilters = document.getElementsByClassName(style.filter_block)[0].children[1].children[1].children;
let genderActiveFilters = document.getElementsByClassName(style.filter_block)[0].children[2].children[1].children;
for(let i=0; i<stylesActiveFilters.length; i++){
if(stylesActiveFilters[i].classList.contains(style.active_option))
stylesFilters.push(stylesActiveFilters[i].textContent);
}
for(let i=0; i<genderActiveFilters.length; i++){
if(genderActiveFilters[i].classList.contains(style.active_option)){
genderFilters.push(genderActiveFilters[i].textContent);
}
}
let newState = {styles: stylesFilters, gender: genderFilters};
console.log(newState);
return(newState);
}
render(){
return(
<div className={style.filter_block} onClick={this.toggleFilterOptions}>
{this.renderFilters}
</div>
)
}
}
function mapStateToProps(state){
return{
mainPageStore:state.productFiltersReduser
}
}
export default connect(
mapStateToProps
)(productFilters);
При этом если вывести в консоль хранилище из функции mapStateToProps, то там значение обновляется корректно, но в props попадает предыдущее значение Прошу подсказать в чем может быть причина