I want to delete a user with the help of redux library. To do this, I first specified the type and then I wrote the action related to this operation and send the output of the operation in acton to the reducer. In the reducer, the values are not in place Which will be sent to the store and from the store to the main component and then to the child component and the necessary changes will be made.
type.js
const DELETED_USER = "DELETED_USER";
action.js
const deleted_User = ( userId,employees ) => {
return{
type : DELETED_USER ,
payload : {
employees : employees ? employees.filter(
(employee) => {
return( employee.id !== userId )
}) : []
}
}
}
Reducer.js
const finalState = {
finalUser : []
}
const reducer = ( state = finalState , action ) => {
switch(action.type){
case DELETED_USER :
return{...state ,
finalUser : [ ...state.finalUser,{employees :action.payload.content} ] }
break;
default : return state
}
}
store.js
import { createStore } from "redux";
import reducer from './todo/reducer';
export default createStore(reducer)
I'm not very sure, but the action in reducer should be action.payload.employees because in deleted_User function you send it as an object with arrays inside with the name "employees" and not "content".
const reducer = ( state = finalState , action ) => {
switch(action.type){
case DELETED_USER :
return{...state ,
finalUser : [ ...state.finalUser, action.payload.employees ] }
break;
default : return state
}
}
or maybe like this:
const deleted_User = ( userId ) => {
return{
type : DELETED_USER ,
payload: userId
}
}
const reducer = ( state = finalState , action ) => {
switch(action.type){
case DELETED_USER :
return{...state ,
finalUser : state.finalUser.filter((employee) => employee.id !== action.payload )
}
break;
default : return state
}
}
Hope it works!