使用Redux-Persist和React-Router-Redux查询Params丢失

时间:2018-01-26 22:12:10

标签: redux react-router react-redux react-router-redux redux-persist

我试图通过查询参数发送从api发送的验证码:

http://example.com?code=AUTH_CODE

然而,当页面加载时,它会转发到url,而不会使用Redux-Persist和React-Router-Redux在React-Redux中工作。我可以在" persist / REHYDRATE"之前找到先前状态的查询参数。但是不能坚持离开路由减速器。我相信Redux-Persist坚持这条路线并消除查询参数。这是我的记录器输出的样子:

Can see the query params here

我可以在' prev状态'中看到查询参数。箭头在哪里,但它已经被下面的状态消失了

enter image description here

我尝试过使用黑名单,并将redux-persist-transform-filter列入黑名单'路由'没有运气。

这是我的index.js的样子:

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import registerServiceWorker from './registerServiceWorker';
import rootReducer from './reducers'
import { Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import routes_design from './routes'

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { PersistGate } from 'redux-persist/lib/integration/react'

const config = {
  key: 'root',
  storage
}

const reducer = persistReducer(config, rootReducer)

function configureStore () {
  let store = createStore(
    reducer,
    compose(...) // Middleware here removed for brevity
  )
  let persistor = persistStore(store)
  return { persistor, store }
}

const { persistor, store } = configureStore()

const history = syncHistoryWithStore(browserHistory, store)

ReactDOM.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <Router history={history} routes={routes_design}/>
     </PersistGate>
   </Provider>,
  document.getElementById('root')
)

registerServiceWorker()

2 个答案:

答案 0 :(得分:0)

如果您有任何机会更新或正在使用react-router v4那么 我有一个类似的问题解析回调字符串在我的情况下是一个facebookl网址是因为我更新到react-router v4,他们停止解析查询字符串但是有很多库来处理这个问题,我用query-string来解决这个问题

你可以检查同一个github问题: https://github.com/ReactTraining/react-router/issues/4410

答案 1 :(得分:0)

如果其他人遇到类似的问题 - 我明白了。我正确地将路由减速器列入黑名单,但我需要清除缓冲器。在我实施黑名单之前,商店很糟糕。