我目前正在开发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)
我想要的是当我在历史记录中来回导航时,userLocation和nearbyShops状态会被同步,因此组件会以正确的状态呈现,而不是使用最新状态。
这是一个gif,可以进一步解释我试图解决的问题:
答案 0 :(得分:1)
所以你想让你的UI直接依赖于历史状态。 不幸的是,这与反应路由器的现有redux包装器相当繁琐。
因此,当历史记录发生变化时,您的componentWillReceiveProps
组件将收到道具更新。
你必须以某种方式将这些新道具转发给应该对它们作出反应的组件。
你可以,例如使用App
组件的方法https://github.com/mksarge/redux-first-routing
将新信息发送到商店。
或者你可以通过多个组件层将道具转发到需要的地方,但我建议不要这样做。
或者,请尝试使用userLocation
,这使得imho更有意义。
它使路由独立于组件。
另见本文:
https://medium.freecodecamp.org/an-introduction-to-the-redux-first-routing-model-98926ebf53cb
nearbyShops
和{{1}}不应该是缩减器,而是选择器,因为它们的信息可以并且应该从历史记录中的地理位置派生。