I have a question, regarding updating a status in redux, I have this code that lists me a few elements and works well, now when I delete one of those elements also works, but the list is not updated after the delete click, I have to reload the page, to see the changes, some guide
// Component listcomponent.js
export default class listcomponent extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
{this.renderGroup()}
</div>
)
}
renderGroup(){
return this.props.allList.map((item, index)=>{
return(
<div className="panel panel-success tour-item-list">
<h3 className="panel-title">{item.name} </h3>
<div onClick={()=>this.handleDelete(item.key)}>delete</div>
</div>
)
})
}
handleDelete(key){
this.props.deleteGroup(key, function(err,res){
if(err){
console.log(err)
}else{
console.log(res);
}
})
}
}
//container -->join listcomponent.js with action
import {getListGroup} from './action/listGroup.js';
import {deleteGroup} from './action/deleteGroup.js';
import listcomponent from './listcomponent.jsx'
class ListContainer extends Component{
componentDidMount(){
this.props.getListGroup();
this.props.deleteGroup();
}
render (){
return (
<listcomponent allList={this.props.allList} deleteGroup={this.props.deleteGroup} />
);
}
}
function mapStateToProps(store) {
return {
allList: store.allList
};
}
function matchDispatchToProps(dispatch) {
return bindActionCreators({
getListGroup: getListGroup,
deleteGroup: deleteGroup
}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(ListContainer);
//reducer ---> listReducer.js
export const listReducer = (state=[], action)=>{
switch(action.type){
case 'GET_GROUP_REQUEST':
return state;
case 'GET_GROUP_FAILURE':
return state;
case 'GET_GROUP_SUCCESS':
return [...state, action.payload];
case 'DELETE_GROUP_SUCCESS':
const idToDelete = action.payload;
return state.filter((item) => {
item.tour_groups[0].tour_group_key !== idToDelete
});
default:
return state;
}
}
// general reducer --> reducer.js
export default import { listReducer } from './listReducer.js'
const reducers = combineReducers({
allGroup:listGroupReducer
})
// store --> store.js
import reducers from './reducer.js';
const store = createStore(
reducers,
applyMiddleware(thunk, logger())
)
// service to edit --getlistgroup.js
export const deleteGroup = (tour_group_key, callback)=>{
return function(dispatch){
dispatch({type:'DELETE_GROUP_REQUEST'});
axios.delete('x/v1/user/tour_groups/'+tour_group_key)
.then((response)=>{
dispatch({type:'DELETE_GROUP_SUCCESS', payload:tour_group_key});
if (typeof callback === 'function') {
callback(null, response.data);
}
})
.catch((response)=>{
dispatch({type:'DELETE_GROUP_FAILURE'})
if(typeof callback ==='function'){
callback(response.data, null)
}
})
}
}
// service to list -->listgroup.js
export const getListGroup = (callback)=>{
return function(dispatch){
dispatch({type:'GET_GROUP_REQUEST'});
axios.get('x/v1/user/tour_groups')
.then((response)=>{
dispatch({type:'GET_GROUP_SUCCESS', payload:response.data});
if (typeof callback === 'function') {
callback(null, response.data);
}
})
.catch((response)=>{
dispatch({type:'GET_GROUP_FAILURE'})
if(typeof callback ==='function'){
callback(error.response.data, null)
}
})
}
}
// the service i call
{
"status": "SUCCESS",
"count": 2,
"tour_groups": [
{
"tour_guide": "ahpkZXZ-c3RyZWV0dG91ci1kZXZlbG9wbWVudHIRCxIEVXNlchiAgICAgICACQw",
"description": "asfease",
"name": "fefe",
"tour_group_key": "ahpkZXZ-c3RyZWV0dG91ci1kZXZlbG9wbWVudHInCxIEVXNlchiAgICAgICACQwLEglUb3VyR3JvdXAYgICAgIDwuwkM"
},
{
"tour_guide": "ahpkZXZ-c3RyZWV0dG91ci1kZXZlbG9wbWVudHIRCxIEVXNlchiAgICAgICACQw",
"description": "ente",
"name": "pariente",
"tour_group_key": "ahpkZXZ-c3RyZWV0dG91ci1kZXZlbG9wbWVudHInCxIEVXNlchiAgICAgICACQwLEglUb3VyR3JvdXAYgICAgIDwuwgM"
}
]
}
You must handle a DELETE action in your reducers, otherwise redux doesn't know that your state has been updated. In other words:
Your Reducer
export const listReducer = (state=[], action)=>{
switch(action.type){
case 'GET_GROUP_REQUEST':
return state;
case 'GET_GROUP_FAILURE':
return state;
case 'GET_GROUP_SUCCESS':
return [...state, action.payload];
case 'DELETE_GROUP_SUCCESS':
const idToDelete = action.payload;
return state.filter((item) => {
item.id !== idToDelete
});
default:
return state;
}
}
Your Action Creator:
export const deleteGroup = (id, callback)=>{
return function(dispatch){
dispatch({type:'DELETE_GROUP_REQUEST'});
axios.delete('x/v1/user/tour_groups/'+id)
.then((response)=>{
dispatch({type:'DELETE_GROUP_SUCCESS', payload: id});
})
.catch((response)=>{
dispatch({type:'DELETE_GROUP_FAILURE'})
})
}
}
Please note that 'id' in the reducer must match the key of the object in your state array. Hence if the items in your array look like this:
[ {
user_id: '12',
profile: {...}
},
...
]
You must make sure to use:
return state.filter((item) => {
item.user_id !== idToDelete
});
If your items are simply a flat array of strings then I recommend you refactor how your state looks. Also, I am not familiar with passing callbacks into your action creator, but I'm almost certain that is not good practice.
EDIT : based on your code your DELETE_GROUP_SUCCESS case is wrong. *Note: this assumes that you have a combineReducers call.
case 'DELETE_GROUP_SUCCESS':
const idToDelete = action.payload;
return state.filter((tourGroup) => {
tourGroup.tour_group_key !== idToDelete
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.