Keeping array with React Native Redux and adding or deleting items with combine reducers

Question

I've been writing React for a while. In my app, there is a form with http request, and if the response is successful, the are parameters that I need to keep. I also give conditions and organize the flattest according to these parameters. I'm trying to keep these parameters with redux array. However, I add these parameters in redux array, but ı can't delete.And where do I call the delete function? I left codes below. Please help me.

//actions.js 
export const ADD_LIST='ADD_LIST'; // add to redux list
export const DELETE_LIST='DELETE_LIST'; //delete redux list 

export const add_List = (list) => {
  return { type: ADD_LIST, payload: list };
};

export const delete_List = (item) => {
  return { type: DELETE_LIST, payload:item};
};

//rootReducer.js
import {combineReducers} from "redux";
import {userReducer} from "./userReducer";
import {listReducer} from "./listReducer";

export default combineReducers({
  userState:userReducer,
  ListState:listReducer,
})

//listReducer.js
import {ADD_LIST} from "./actions";
import {DELETE_LIST} from "./actions";


const INITIAL_STATE={
    list:[]
}

export function listReducer(state=INITIAL_STATE,action){
    switch (action.type){
        case 'ADD_LIST':
            return{...state,
                list:[...state.list,action.payload]
            };
        case 'DELETE_LIST':
            return{
                list:[
                    ...state.list.filter(item=>item!==action.payload) //I don't know if it is true?
                ]
            }
        default:
            return state;
    }
}

//Http Request
if (xmlhttp.responseText.includes("S0000")) {
 Alert.alert("Success", "Success. ", [
                         {text: 'OK', onPress: () => exitAction()},
 
                     ],
                     {cancelable: true}
                 )
 setData(oldArray => [...oldArray, {id: id, date: date}]) //if the result is successful, i set user's id and date to a state that has name data
 dispatch(ADD_LIST(data));
 }
 
   {
  let count=0;
  data?.map((userData)=>{
           if(userData.id===item.id&&userData.date===moment().format('DD-MM-   YYYY')).{ //I want if this condition not met, delete the item redux array.
            count+=1;
           }
         })
         return(
         
         )        
 })
 />
 
 //I also want visible filter for the redux array. I dont work with redux toolkit or slice. Please Help me.

user_8690857 · Answer

The data looks like it has an id property that you should use to uniquely identify an array element object that you want to remove from the array.

Example object: { id, date }

Deleting an item dispatch(delete_List(item)); where item is the entire object.

Reducer logic:

case 'DELETE_LIST':
  return {
    ...state, // <-- shallow copy state
    list: state.list.filter( // <-- filter creates new array reference
      item => item.id !== action.payload.id
    ),
  }

Keeping array with React Native Redux and adding or deleting items with combine reducers

1 Answers