Друзья,всем доброго времени суток,нужно реализовать сортировку товаров по увеличению и уменьшению цены.Как написать такой акшен.? Я пробовал в акшене писать сортровку массива объектов с помощью метода sort.Сам масcив создается в сторе с помощью React хука UseEffect вторым параметром в UseEffect я передал этот самый массив,но перерисовка происходит только когда мы переходим в корзину а в риал тайме перерисовки мы не видим.Подскажите что делаю не так? Вот сам компонент который загружает товары в стор и отрисовывает их:
function Home() {
const books = useSelector(state=>state.books.books);
const isFetched = useSelector(state=>state.books.isFetched);
const dispatch = useDispatch();
useEffect(()=>{
if(!books.length ){
dispatch(setBooks())
}
},[books]
);
return (
<Card.Group itemsPerRow={5}>
{!isFetched ? <Loader/> : books.map(i=>(<Books title = {i.title}
key={i.id}
author={i.author}
image={i.image}
price={i.price}
rating={i.rating}
/>))}
</Card.Group>
);
}
А вот редьюсер в котором написана сортировка и санка для загрузки товаров в стор:
const initialState = {
books: [],
isFetched: false,
}
export const SET_BOOKS = 'SET_BOOKS';
export const setBooks = (books) =>{
return async dispatch => {
const response = await fetch('http://localhost:3000/books');
const json = await response.json();
dispatch({
type: SET_BOOKS,
payload: json
});
}
}
const SET_FILTER_LOWER = 'SET_FILTER_LOWER';
export const setFilter = filter => ({
type: SET_FILTER_LOWER,
payload: filter,
});
export const setBooksReducer = (state = initialState, action) =>{
switch(action.type){
case SET_BOOKS:
return {...state,
books: state.books.concat(action.payload),
isFetched: true
}
case SET_FILTER_LOWER:
return {
...state,
books: action.payload.sort((a,b)=>a.price-b.price)
// books: action.payload.filter((el)=>el.price<=300)
};
default:
return state
}
}