I've tested everything from the itemList to the reducer and action, it's working fine and successfully deleting the desired item. However, I encountered an error afterwards. I'm not sure where I went wrong. Can someone guide me on what steps I should take next?
// ItemList.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { selectAllItems } from '../../../redux/reducer/itemReducer';
import { deleteItem } from '../../../redux/action/ItemAction';
import AppButton from '../../shared/AppButton';
const ItemList = () => {
const dispatch = useDispatch();
const itemData = useSelector(selectAllItems);
function removeHandler(id){
dispatch(deleteItem(id));
}
return (
<>
{itemData.map((item) => (
<View style={styles.itemListContainer} key={item.id}>
<Text style={styles.textStyle}>{item.id}</Text>
<Text style={styles.textStyle}>{item.name}</Text>
<Text style={styles.textStyle}>{item.price}</Text>
<Text style={styles.textStyle}>{item.availableItem}</Text>
<View style={styles.operationContainer}>
<AppButton title="Edit" buttonStyle={buttonStyle.edit} textStyle={buttonStyle.text}/>
<AppButton title="Remove" buttonStyle={buttonStyle.remove} textStyle={buttonStyle.text} onPress={() => removeHandler(item.id)}/>
</View>
</View>
))}
</>
)
}
// ItemReducer.js
const itemReducer = (state = initialState, { type, payload } = action) =>{
switch (type) {
case ADD_ITEM:
return { ...state, payload };
case DELETE_ITEM:
return { payload };
default:
return state;
} }
// itemAction.js
function DELETE_ITEM(filtered){
return{
type: 'DELETE_ITEM',
payload: filtered
}
}
export function deleteItem(id){
return function(dispatch, getState){
const itemData = getState().item;
const filtered = itemData.filter((item) => item.id !== id);
dispatch(DELETE_ITEM(filtered));
}
}