Здравствуйте подскажите пожалуйста как правильно реализовать удаление в ReduxToolKit

Всем привет, кто может подсказать как реализовать удаление в redux toolkit, чтобы после удаления объекта автоматически перерисовывался интерфейс, а то у меня он остается статичным

import {createSlice, PayloadAction} from '@reduxjs/toolkit';
export interface IBasketUser {
  id: string;
  productName: string;
  price: number;
  cofeId: string;
  cofeName: string;
  imagesPath: string;
  count: number;
}
export const initialStateBasketUser: Array<IBasketUser> = [
  {
    id: '',
    productName: '',
    price: 0,
    cofeId: '',
    cofeName: '',
    imagesPath: '',
    count: 0,
  },
];
export const basketUserSlice = createSlice({
  name: 'basketUserState',
  initialState: initialStateBasketUser,
  reducers: {
    addBasket(state, action: PayloadAction<IBasketUser>) {
      state.push(action.payload);
    },
    deleteBasket(state, action: PayloadAction<string>) {
      const itemId = action.payload;
      const filterData = state.filter(data => data.id !== itemId);
      state = filterData;
    },
  },
});

export default basketUserSlice.reducer;
export const {addBasket, deleteBasket} = basketUserSlice.actions;

(Это пример того как я реализую удаления в RTK)

import { Button, SafeAreaView, Text, TouchableOpacity, View } from "react-native";
import {useDispatch, useSelector} from 'react-redux';
import {RootState} from '../../redux/reduxStore/store';
import {
  deleteBasket,
  initialStateBasketUser,
} from '../../redux/reduxStateSlice/basketUserSlice';

export const OrderComponent = () => {
  const dispatch = useDispatch();
  const basketUserState = useSelector(
    (state: RootState) => state.basketUserState,
  );
  //console.log(basketUserState);
  return (
    <SafeAreaView>
      {basketUserState != initialStateBasketUser && (
        <View>
          {basketUserState.map((data, index) => (
            <View>
              <TouchableOpacity
                onPress={() => {
                  dispatch(deleteBasket(data.id));
                }}>
                <Text>{data.productName}</Text>
                <Text>{data.cofeName}</Text>
                {data.count != 0 && <Text>{data.count}</Text>}
                <Text>{data.id}</Text>
              </TouchableOpacity>
              <Button title={'press'} onPress={()=>console.log(basketUserState)}/>
            </View>
          ))}
        </View>
      )}
    </SafeAreaView>
  );
};

(Это пример того как я реализую компонен, который должен перерендерится)


Ответы (0 шт):