Reputation: 107
I'm learning React Redux at the moment and I'm working on a food list in which the user can add and remove items from a Flatlist
, up until now I worked on adding the items, which works perfectly, now I'm using the same approach to remove the item from the global state foodList
, I use onLongPress
to start the function createTwoButtonAlert
and from there launch removeFromFoodList
in the Diet
screen. When I run the code and I proceed to remove the items nothing happens, not even in the Terminal, previously I was using a method which also didn't work because instead of deleting the selected item it deleted all items in the Flatlist. Thank you for your help.
Diet
class Diet extends Component {
createTwoButtonAlert = (item) =>
Alert.alert(
"Delete Food",
"Are you sure to delete this food?",
[
{
text: "Cancel",
style: "cancel"
},
{ text: "Delete",
onPress: () => this.props.removeFromFoodList(item)
}
]
);
render() {
return (
<FlatList
data={this.props.foodList}
renderItem={({item}) => (
<View>
<TouchableOpacity
onLongPress={() => this.createTwoButtonAlert(item)}
>
<Text>{item.foodName}</Text>
<Text>
{item.calories}
</Text>
<MaterialIcons name="arrow-forward-ios" />
</TouchableOpacity>
</View>
)}
keyExtractor={item => item.foodId}
/>
}
}
function mapStateToProps(store){
return{
foodList: store.userState.foodList
};
}
const mapDispatchToProps = { removeFromFoodList };
export default connect(mapStateToProps, mapDispatchToProps)(Diet);
INDEX
import { ADD_FOOD, REMOVE_FOOD } from "../constants/index";
export const updateFoodList = (foodList) => {
return { type: ADD_FOOD, payload: foodList}
}
export const removeFromFoodList = (item) => {
return { type: REMOVE_FOOD, payload: item.foodId}
}
REDUCERS
import { ADD_FOOD, REMOVE_FOOD } from "../constants";
const initialState = {
foodList: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case ADD_FOOD:
return{
...state,
foodList: [...action.payload],
}
case REMOVE_FOOD:
return{
...state,
foodList: [...state.foodList.filter((item) => item.foodId != action.foodId)],
}
default:
return state
}
};
ARRAY EXAMPLE
Array [
Object {
"calories": "120",
"foodId": 0.8845240802796346,
"foodName": "Rice",
},
]
Upvotes: 1
Views: 330
Reputation: 4227
You should be using
foodList: [...state.foodList.filter((item) => item.foodId != action.payload)]
Upvotes: 2