reactjs:动作后的redux不重新渲染 [英] reactjs: after action redux not re-render
问题描述
我有一个问题，关于在redux中更新状态，我有这段代码列出了一些元素并且运行良好，现在当我删除其中一个元素时也可以使用，但是单击删除后列表不会更新，我必须重新加载页面，以查看更改，一些指南
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
//组件listcomponent.js
// 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->将listcomponent.js与动作连接
//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
//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;
}
}
//通用reducer-> reducer.js
// general reducer --> reducer.js
export default import { listReducer } from './listReducer.js'
const reducers = combineReducers({
allGroup:listGroupReducer
})
//商店-> store.js
// store --> store.js
import reducers from './reducer.js';
const store = createStore(
reducers,
applyMiddleware(thunk, logger())
)
//服务编辑--getlistgroup.js
// 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)
}
})
}
}
//服务列出-> listgroup.js
// 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)
}
})
}
}
//我打电话给的服务
{
"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"
}
]
}
推荐答案
您必须在化简器中处理DELETE操作，否则redux不知道您的状态已更新.换句话说:
You must handle a DELETE action in your reducers, otherwise redux doesn't know that your state has been updated. In other words:
您的减速器
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'})
})
}
}
请注意，化简器中的"id"必须与状态数组中对象的键匹配.因此，如果数组中的项目如下所示:
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: {...}
},
...
]
您必须确保使用:
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.
编辑:根据您的代码，您的DELETE_GROUP_SUCCESS案例是错误的. *注意:这假设您有一个CombineReducers呼叫.
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
});
这篇关于reactjs:动作后的redux不重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
