reactjs: after action redux not re-render

Question

У меня есть вопрос, касающийся обновления статуса в redux, у меня есть этот код, который перечисляет мне несколько элементов и работает хорошо, теперь, когда я удаляю один из этих элементов, также работает, но список не обновляется после удаления мыши, я должен перезагрузить страницу, чтобы увидеть изменения, некоторые руководство

// Компонентный 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); 

     } 
     }) 
    } 
    } 

// контейнер -> присоединиться к listcomponent. js с действием

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); 

// Редуктор ---> 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;  
    } 
} 

// общий редуктор -> reducer.js

export default import { listReducer } from './listReducer.js' 

    const reducers = combineReducers({ 
     allGroup:listGroupReducer 

}) 

// магазин -> store.js

import reducers from './reducer.js'; 

const store = createStore(
    reducers, 
    applyMiddleware(thunk, logger()) 
) 

// сервис для редактирования --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) 
      } 
     }) 
    } 
} 

// Сервис в список -> 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) 
       } 
      }) 
     } 
    } 

// службы я называю

{ 
    "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" 
    } 
    ] 
} 

Answer 1

Вы должны обрабатывать УДАЛИТЬ действия в ваших редукторами, в противном случае перевождь не знает, что ваш состояние обновлено. Другими словами:

Ваш редуктор

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;  
    } 
} 

Ваши действия Создатель:

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'}) 
     }) 
    } 
} 

Пожалуйста, обратите внимание, что «идентификатор» в редукторе должен соответствовать ключу объекта в вашем штате массива. Следовательно, если элементы в массиве выглядеть следующим образом:

[ { 
    user_id: '12', 
    profile: {...} 
    }, 
    ... 
] 

Вы должны убедиться в том, чтобы использовать:

return state.filter((item) => { 
    item.user_id !== idToDelete 
}); 

Если ваши детали просто плоский массив строк, то я рекомендую вам реорганизовать, как ваше состояние выглядит. Кроме того, я не знаком с передачей обратных вызовов в ваш создатель действия, но я почти уверен, что это не хорошая практика.

EDIT: на основании вашего кода ваш случай DELETE_GROUP_SUCCESS ошибочен. * Примечание: это предполагает, что у вас есть вызов combReducers.

case 'DELETE_GROUP_SUCCESS':  
    const idToDelete = action.payload; 
    return state.filter((tourGroup) => { 
     tourGroup.tour_group_key !== idToDelete 
    });