如何使用redux-undo撤消重做BigSate的subSate

时间:2017-09-11 14:18:37

标签: redux react-redux

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

0 个答案:

没有答案