使用路由

Question

我正在使用redux-persist的反应，并且如果用户从/ home转到/ search，则会遇到“Rehydrate”事件被触发两次的麻烦。

首先，状态在根中是正确的。然后我改变了我的搜索参数。单击搜索后，我可以看到“Rehydrate”事件已激活，它会再次更改应用程序的状态。

知道出了什么问题以及我可以做些什么来修复它？

以下是我正在使用的代码

import {Router, Route, browserHistory, Redirect} from 'react-router';
import {persistStore, autoRehydrate} from 'redux-persist'
import {Provider} from 'react-redux';
import {compose,createStore, applyMiddleware} from 'redux';
import reducers from './reducers';
import thunkMiddleware  from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import localForage from "localforage";


export const store = createStore(
    reducers,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    compose(
        applyMiddleware(
            thunkMiddleware,
            promiseMiddleware()),
        autoRehydrate()
    )
);
const persistor = persistStore(store, {storage: localForage});
render(
    <Provider store={store} persistor={persistor}>
        <Router history={browserHistory}>
            <Route path="/" component={Home}/>
            <Route path="/search" component={Search}/>
        </Router>
    </Provider>,
    document.getElementById('root')
);

谢谢和最好的问候

PS：还原状态的附加图像。正如您在触发搜索后所看到的那样，有一个新的持久/ Rehydrate事件。我有点幸运，在重新水合事件之后搜索仍然完成 - 但行为并不好。

Answer 1

我不确定react-persist是如何正常工作的。但我认为您想要将exact道具添加到Home的路线中，如下所示：

<Route path="/" exact component={Home}/>

否则两个路由都将呈现，并且可能会在每个组件呈现时触发您看到的双重操作。

Answer 2

我查看了文档，似乎div1可能会触发补液操作，因此可能不需要persistStore()。

  

为方便起见，提供自动补水。在大型应用程序中，   或者非典型的还原剂组合物，可能不会自动补液   方便。在这种情况下，只需省略autoRehydrate。补液   仍然会通过persistStore触发操作，然后可以处理   单独使用减速器或使用定制的补液处理器。

请尝试删除autoRehydrate()

Answer 3

补水是创造商店后的第二步，在补液回调中应该做任何其他事情。

它是persiststore函数的第3个参数。 persistStore（store，[config，callback]）

查看使用补液回调是否有帮助。