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

        }
      })
    }
  }

// container - ＆gt; 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 ---＆gt; 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 - ＆gt; reducer.js

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

    const reducers = combineReducers({
      allGroup:listGroupReducer

})

// store - ＆gt; 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)
            }   
        })
    } 
}

//服务到列表 - ＆gt; 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

您必须在reducer中处理DELETE操作，否则redux不知道您的状态已更新。换句话说：

你的减速机

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

请注意，reducer中的'id'必须与state数组中对象的键匹配。因此，如果数组中的项目如下所示：

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

您必须确保使用：

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

如果你的项目只是一个扁平的字符串数组，那么我建议你重构你的状态。另外，我不熟悉将回调传递给你的动作创作者，但我几乎肯定这不是一个好习惯。

编辑：根据您的代码，您的DELETE_GROUP_SUCCESS案例有误。 *注意：这假设您有一个combineReducers调用。

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

reactjs：在action redux之后没有重新渲染

1 个答案: