react redux containers send state to another container - reactjs

Question

Hello I have an action to get data from my backend and then I created a new container and I use this state and I created an action to filter this state, and then when it clicks back to my component product the products that were filtered
My action fetch:
export const fetchProduct = () => {
console.log('action')
return dispatch => {
dispatch(fetchStarted());
api
.get('/products')
.then(res => {
dispatch(fetchSucess(res.data));
})
.catch(err => {
dispatch(fetchFailed(err.message));
});
};
};
My reducer fetch:
const initialState = {
loading: false,
products: [],
error: null
};
export default function productReducer(state = initialState, action) {
switch (action.type) {
case FETCH_LOADING:
return {
...state,
loading: true
};
case FETCH_SUCESS:
return {
...state,
loading: false,
error: null,
...state, products: action.data
};
case FETCH_FAIL:
return {
...state,
loading: false,
error: action.error
};
default:
return state;
}
}
My container product:
class HomeProducts extends Component {
componentDidMount() {
this.props.fetchProduct();
}
render() {
const productItems = this.props.products.map( product =>(
<div className="col-md-4 pt-4 pl-2" key={product.id}>
<div className = "thumbnail text-center">
<a href={`#${product.id}`} onClick={(e)=>this.props.handleAddToCard(e,product)}>
<p>
{product.name}
</p>
</a>
</div>
<b>{util.formatCurrency(product.price)}</b>
<button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
</div>
)
)
return (
<div className="container">
<div className="row">
{productItems}
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return{
products: state.data.products,
loading: state.data.loading,
error: state.data.error
}
};
const mapActionsToProps = {
fetchProduct: fetchProduct
};
export default connect(mapStateToProps, mapActionsToProps)(HomeProducts);
My product container will show in a div all the products it fetched in the backend.
And now My container filter:
class FilterHome extends Component {
render() {
console.log(this.props);
return (
<>
<div className="row">
<button className="filterbt btn btn-danger btn-rounded">Filters</button>
<div className=" mt-4 d-flex flex-column">
<p className="textCategory">CATEGORY</p>
<div className="category d-flex flex-column">
<p>Stat Trak</p>
<p>Normal</p>
</div>
<p className="textCategory">EXTERIOR</p>
<div className="category d-flex flex-column">
<p value={2} onChange={(e) => this.props.filterProducts(this.props.products, e.target.value)}>Factory New ()</p>
<p>Minimal Wear ()</p>
<p>Field Tested ()</p>
<p>Well Worn ()</p>
<p>Battle Scarred ()</p>
</div>
</div>
</div>
</>
)
}
}
const mapStateToProps = state => ({
products: state.data.products,
});
export default connect(mapStateToProps, {filterProducts})(FilterHome);
and then I created an action and a redux to get the filtered product list and then send this filtered stripe to my div that displays the products.
Action filter products:
import {FILTER_PRODUCT} from '../constants/fetchTypes';
export const filterProducts = (products,value) => (dispatch) => {
return dispatch({
type:FILTER_PRODUCT,
payload:{
value:value,
products:value === ''? products: products.filter(v => v.id_sub = value)
}
})
}
My reducer filter:
import {
FETCH_SUCESS,
FETCH_FAIL,
FETCH_LOADING,
FILTER_PRODUCT
} from '../constants/fetchTypes';
const initialState = {
products: []
};
export default function productReducer(state = initialState, action) {
switch (action.type) {
case FILTER_PRODUCT:
return {
...state,
filteredProducts: action.payload.products
};
default:
return state;
}
} return state;
}
}
I don't know how I can change the filtered products in my product div