react-router-redux 5:维护导航中的商店状态历史记录

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router-redux 5:维护导航中的商店状态历史记录相关的知识,希望对你有一定的参考价值。

我目前正在开发react redux应用程序。当我使用浏览器中的上一个和下一个按钮导航时,url正在更改并且路由可以正确呈现。但是,redux存储保持最新状态,并且没有时间跨越导航,唯一变化的状态是路由器位置状态。

这是我的redux商店:

import {applyMiddleware, combineReducers, createStore} from "redux";
import reducers from "../reducers";
import history from '../history'
import {routerMiddleware, routerReducer} from "react-router-redux";

const middleware = routerMiddleware(history)

const store = createStore(
  combineReducers({
    ...reducers,
    router: routerReducer
  }),
  applyMiddleware(middleware)
)

export default store

该应用程序的索引文件是:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import {registerObserver} from "react-perf-devtool";
import {Provider} from "react-redux";
import store from "./store";
import {ConnectedRouter} from "react-router-redux";
import history from './history'

if (module.hot) {
  module.hot.accept()
}

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);
registerObserver();
registerServiceWorker()

历史如下:

import createHistory from 'history/createBrowserHistory'

const history = createHistory()

export default history

最后,这里是减速器:

import {SET_USER_LOCATION, SET_NEARBY_SHOPS} from "../constants/action-types";

const initialState = {
  userLocation: {
    latitude: 0.,
    longitude: 0.
  },
  nearbyShops: {
    shops: [],
    radiusOfSearch: 0.
  }
}

const userLocation = (state = initialState.userLocation, action) => {
  switch (action.type) {
    case SET_USER_LOCATION:
      return { latitude: action.payload.latitude, longitude: action.payload.longitude }
    default:
      return state
  }
}

const nearbyShops = (state = initialState.nearbyShops, action) => {
  switch (action.type) {
    case SET_NEARBY_SHOPS:
      return { shops: [...action.payload.shops], radiusOfSearch: action.payload.radiusOfSearch }
    default:
      return state
  }
}

const reducers = { userLocation, nearbyShops }

export default reducers

我使用push导航到另一条路线:

const mapDispatchToProps = dispatch => bindActionCreators({
  setNearbyShops: nearbyShops => setNearbyShops(nearbyShops),
  goToNearbyShops: (latitude, longitude, radius) => push(`/nearby/@${latitude},${longitude},${radius}`)
}, dispatch)

我想要的是当我在历史记录中来回导航时,用户位置和附近的商店状态会被同步,因此组件将以正确的状态呈现,而不是使用最新状态。

这是一个gif,以进一步解释我试图解决的问题:

The history location is updated when pressing back but not the data state

答案

因此,您希望使UI直接依赖于历史状态。不幸的是,这与反应路由器的现有redux包装器相当繁琐。

因此,当历史记录发生变化时,您的App组件将收到道具更新。你必须以某种方式将这些新道具转发给应该对它们作出反应的组件。你可以,例如使用componentWillReceiveProps组件的方法App将新信息发送到商店。

或者你可以通过多个组件层将道具转发到需要的位置,但我建议不要这样做。

或者,尝试使用https://github.com/mksarge/redux-first-routing,这使得imho更有意义。它使路由独立于组件。另见本文:https://medium.freecodecamp.org/an-introduction-to-the-redux-first-routing-model-98926ebf53cb

无论如何,userLocationnearbyShops不应该是减速器,而应该是选择器,因为它们的信息可以而且应该从历史中的地理位置得出。

以上是关于react-router-redux 5:维护导航中的商店状态历史记录的主要内容,如果未能解决你的问题,请参考以下文章

Redux 使用 react-router-redux 连接“块”导航

React-router-redux 推送操作不起作用

有没有办法在 react-router-redux@5.0.0 中定义默认路由(如果没有匹配)

React-Router-Redux:在“react-router-redux”中找不到导出“syncHistoryWithStore”

反应如何在 redux-saga 中导航路由器?

如何避免重定向两次(react-router-redux)?