[英]reactjs: after action redux not re-render
我有一個問題,關於在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);
// 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
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"
}
]
}
您必須在化簡器中處理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”必須與狀態數組中對象的鍵匹配。 因此,如果數組中的項目如下所示:
[ {
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.