我是React和redux的新手,我可以使用redux-undo库来撤消/重做状态,但想知道如何撤消/重做整个应用程序的bigSate的smallsubstate。 例如BigState = dataReducer + dummyReducer 使用undo dataReducer和dummyReducer进行上一步。 但是如何撤消一个特定的reducer状态说dummyReducer而不是dataReducer& dummyReducer.Thanks提前。以下是我正在使用的代码。
reducer1.
-------------
import undoable, { distinctState } from 'redux-undo'
export const dataReducer=(state={
'data':[]
},action)=>{
switch(action.type){
case 'ALL_DATA':
state={
data:action.payload
};
break;
case 'DATA_BYNAME_ASCENDING':
state={
data:action.payload
};
break;
case 'DATA_BYNAME_DESCENDING':
state={
data:action.payload
};
break;
case 'DATA_BYID_ASCENDING':
state={
data:action.payload
};
break;
case 'DATA_BYID_DESCENDING':
state={
data:action.payload
};
break;
}
return state;
};
const undoabledataReducer = undoable(dataReducer, {
filter: distinctState()
})
export default undoabledataReducer;
reducer2
-----------------
import undoable, { distinctState } from 'redux-undo'
const dummyReducer=(state={'data':[1,2,3,4,5]},action)=>{
switch(action.type){
case 'DUMMY_ACTION':
state={
data:[...state.data,action.payload]
}
break;
}
return state;
}
const dummy = undoable(dummyReducer, {
filter: distinctState()
})
export default dummy;
store.js
---------------
import {createStore} from "redux";
import {applyMiddleware,combineReducers} from "redux";
import logger from "redux-logger";
import undoabledataReducer from "../Reducers/DataReducer";
import promise from "redux-promise";
import dummy from "../Reducers/dummyReducer";
export const store=createStore(
combineReducers({undoabledataReducer,dummy}),
{},
applyMiddleware(logger,promise)
);
component.js
-------------------------------
<button onClick={this.props.onUndo} disabled={!this.props.canUndo}>
Undo
</button>
<button onClick={this.props.onRedo} disabled={!this.props.canRedo}>
</button>
const mapStateToProps =(state)=>{
return{
data:state.undoabledataReducer.present,
canUndo: state.undoabledataReducer.past.length > 0,
canRedo: state.undoabledataReducer.future.length > 0
};
};
const mapDispatchToProps =(dispatch)=>{
return{
getNameAsending:()=>{
dispatch(getAlldataByNameAsending())
},
getNameDescending:()=>{
dispatch(getAlldataByNameDesending())
},
getAlldataByIdAsending:()=>{
dispatch(getAlldataByIdAsending())
},
getAlldataByIdDesending:()=>{
dispatch(getAlldataByIdDesending())
},
onUndo: () => dispatch(UndoActionCreators.undo()),
onRedo: () => dispatch(UndoActionCreators.redo())
};
};
export default connect(mapStateToProps,mapDispatchToProps)(Contact);