reactjs - redux-undo 的初始化历史记录不会填充过去或 future

Question

我在使用redux-undo初始化可撤消的reducer的历史记录时遇到问题。 These are the directions I followed.加载当前状态，但不加载过去和 future 状态。我在这里托管代码，https://murmuring-shelf-40601.herokuapp.com我在中间件中添加了一个记录器，因此如果您打开控制台，您将看到撤消/重做历史记录。

这是我的商店。我将其包装在一个 promise 中，因为我从服务中获取历史记录，但我已将初始历史记录硬编码到initialHistory 对象以进行测试。 herokuapp.com 上托管的代码正在获取实时数据。

import { get } from 'axios'
import { applyMiddleware, createStore } from 'redux'
import { createLogger } from "redux-logger";
import thunk from "redux-thunk"
import { combineReducers } from 'redux'
import Promise from 'promise';
import UndoableNoteList from '../reducers/UndoableNoteList/UndoableNoteList'

var store = new Promise(function (resolve, reject) {
    get("/server/load-notes").catch((response)=> {
        const initialHistory = {
            "UndoableNoteList": {
                "present": {
                    "list": [
                        {
                            "id": "f5230212-8a46-4a48-91c1-5fadd4e4ae5e",
                            "text": "123123123123123123213"
                        },
                        {
                            "id": "bd4fe681-5071-4dd8-99e8-f46825eee866",
                            "text": "Jdk123123123123123123123sjdmd"
                        }
                    ]
                },
                "past": [
                    {
                        "list": [
                            {
                                "id": "c60dc097-00ea-4dfa-9532-de44b25b1a7a",
                                "text": "Eggs"
                            },
                            {
                                "id": "f61997bc-c8d7-46d7-836f-44af50a1a70d",
                                "text": "Milk"
                            },
                            {
                                "id": "ab932fae-8588-4b20-a6c4-620c6a4345f7",
                                "text": "Cheese"
                            }
                        ]
                    },
                    {
                        "list": [
                            {
                                "id": "f5230212-8a46-4a48-91c1-5fadd4e4ae5e",
                                "text": "Hhhfg"
                            },
                            {
                                "id": "bd4fe681-5071-4dd8-99e8-f46825eee866",
                                "text": "Jdksjdmd"
                            }
                        ]
                    }
                ],
                "future": []
            }
        };
        const reducer = combineReducers({UndoableNoteList: UndoableNoteList});
        const middleware = applyMiddleware(thunk, createLogger());
        const store = createStore(reducer, initialHistory, middleware);
        resolve(store);
    });
});

export default store

这是我的不可撤销的 reducer 。

更新 - 此 reducer 存在一些问题。不要将其用作引用。

import undoable from 'redux-undo'
import {loadNotesComplete} from '../../actions/LoadNotesComplete'
import {loadNotesSuccess} from '../../actions/LoadNotesSuccess'
import {loadNotesFailure} from '../../actions/LoadNotesFailure'

import {saveNotesWaiting} from '../../actions/SaveNotesWaiting'
import {saveNotesPost} from '../../actions/SaveNotesPost'
import {saveNotesSuccess} from '../../actions/SaveNotesSuccess'
import {saveNotesFailure} from '../../actions/SaveNotesFailure'

import store from '../../store/Store'

const NoteList = (state = {}, action = {}) => {
    if (action.type === "ADD_NOTE") {
        state.currentNoteSaveState = "ADD_NOTE";
        action.payload.then((note)=> {
            state.list = state.list.concat(note);
            store.then((store)=> {
                store.dispatch(saveNotesWaiting(store.getState()));
            });
        });
    } else if (action.type === "REMOVE_NOTE") {
        state.currentNoteSaveState = "REMOVE_NOTE";
        action.payload.then((id)=> {
            state.list = state.list.filter(function (item) {
                return item.id !== id;
            });
            store.then((store)=> {
                store.dispatch(saveNotesWaiting(store.getState()));
            });
        });
    } else if (action.type === "LOAD_NOTES") {
        state.currentNoteSaveState = "LOAD_NOTES";
        action.payload.then((response)=> {
            response = {...response};
            store.then((store)=> {
                store.dispatch(loadNotesComplete(response));
            });
        }).catch((reject)=> {
            console.log("reject from axios promise");
            console.log(reject);
        });
    } else if (action.type === "LOAD_NOTES_COMPLETE") {
        state.currentNoteSaveState = "LOAD_NOTES_COMPLETE";
        action.payload.then((response)=> {
            if (response.status >= 200 && response.status < 300) {
                store.then((store)=> {
                    store.dispatch(loadNotesSuccess(response.data.UndoableNoteList));
                });
            }
            else {
                console.log("loadNotesFailure(response)");
                store.then((store)=> {
                    store.dispatch(loadNotesFailure(response));
                });
            }
        });
    } else if (action.type === "LOAD_NOTES_SUCCESS") {
        //console.log("action.payload");
        //console.log(action.payload);
        //state.currentNoteSaveState = "LOAD_NOTES_SUCCESS";
        //state.list = action.payload.present.list;
    } else if (action.type === "LOAD_NOTES_FAILURE") {
        state.currentNoteSaveState = "LOAD_NOTES_FAILURE";
        console.log(action.payload);
    }
    else if (action.type === "SAVE_NOTES_WAITING") {
        state.currentNoteSaveState = "SAVE_NOTES_WAITING";
        action.payload.then((notes)=> {
            store.then((store)=>{
                store.dispatch(saveNotesPost(notes));
            });
        }).catch(()=> {
            console.log("canceling previous save");
        });
    } else if (action.type === "SAVE_NOTES_POST") {
        state.currentNoteSaveState = "SAVE_NOTES_POST";
        action.payload.then((response)=> {
            if (response.status >= 200 && response.status < 300) {
                store.then((store)=>{
                    store.dispatch(saveNotesSuccess(response));
                });

            } else {
                store.then((store)=>{
                    store.dispatch(saveNotesFailure(response));
                });
            }
        });
    } else if (action.type === "SAVE_NOTES_SUCCESS") {
        state.currentNoteSaveState = "SAVE_NOTES_SUCCESS";
    } else if (action.type === "SAVE_NOTES_FAILURE") {
        state.currentNoteSaveState = "SAVE_NOTES_FAILURE";
    } else if (action.type === "UNDO") {
        state.currentNoteSaveState = "UNDO";
        action.payload.then(()=> {
            store.then((store)=>{
                store.dispatch(saveNotesWaiting(store.getState()));
            });

        });
    } else if (action.type === "REDO") {
        state.currentNoteSaveState = "REDO";
        action.payload.then(()=> {
            store.then((store)=> {
                store.dispatch(saveNotesWaiting(store.getState()));
            });
        });
    }
    console.log(action.type);
    console.log(state);
    state = {...state};
    return state;
};

const UndoableNoteList = undoable(NoteList, {
    filter: function filterActions(action, currentState, previousHistory) {
        return action.type === "ADD_NOTE" ||
            action.type === "REMOVE_NOTE";
    }
});
export default UndoableNoteList;

这是我设置提供程序的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import Layout from './pages/Layout';
import './index.css';
import {Router, Route, IndexRoute, hashHistory } from "react-router"
import Home from './pages/Home/Home';
import ListView from './pages/ListView/ListView'
import ListAdd from './pages/ListAdd/ListAdd'

import store from './store/Store'

store.then((store)=> {
    ReactDOM.render(
        <Provider store={store}>
            <Router history={hashHistory}>
                <Route path="/" component={Layout}>
                    <IndexRoute component={Home} name="Home"></IndexRoute>
                    <Route path="/view-notes" component={ListView} name="ViewNotes"></Route>
                    <Route path="/add-note" component={ListAdd} name="AddNote"></Route>
                </Route>
            </Router>
        </Provider>,
        document.getElementById('root')
    );
});

Answer 1

我将 redux-undo 库从 0.6.1 更新到 1.0.0-beta7，现在历史记录已正确填充