[英]reactjs: after action redux not re-render
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 我有一个问题,关于在redux中更新状态,我有这段代码列出了一些元素并且运行良好,现在当我删除其中一个元素时也可以工作,但是在单击删除后列表没有更新,我有重新加载页面,查看更改,一些指南
// Component listcomponent.js //组件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 //容器->将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);
//reducer ---> listReducer.js // 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 //通用reducer-> reducer.js
export default import { listReducer } from './listReducer.js'
const reducers = combineReducers({
allGroup:listGroupReducer
})
// store --> store.js //商店-> store.js
import reducers from './reducer.js';
const store = createStore(
reducers,
applyMiddleware(thunk, logger())
)
// service to edit --getlistgroup.js //服务编辑--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 //服务列出-> 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. 您必须在化简器中处理DELETE动作,否则redux不知道您的状态已更新。 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. 请注意,Reducer中的“ id”必须与状态数组中对象的键匹配。 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. 编辑 :根据您的代码,您的DELETE_GROUP_SUCCESS情况是错误的。 *Note: this assumes that you have a combineReducers call.
*注意:这假设您有一个CombineReducers呼叫。
case 'DELETE_GROUP_SUCCESS':
const idToDelete = action.payload;
return state.filter((tourGroup) => {
tourGroup.tour_group_key !== idToDelete
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.