我正在努力让我的React/Redux应用程序根据操作更新URL.我做了很多环顾四周.我以为我有一个处理它,但显然我错过了一些东西.我还有其他正确响应的减速器.
目前,我只是想记录行动.
路由减速器
const initialState = { locationBeforeTransitions: null }; export default function routing(state = initialState, action) { switch (action.type) { case 'LOCATION_CHANGE': console.log(action) default: return state } }
商店
/* Things from other people */ import { createStore, applyMiddleware, compose } from 'redux' import { syncHistoryWithStore } from 'react-router-redux'; import { browserHistory } from 'react-router' import thunkMiddleware from 'redux-thunk' import createLogger from 'redux-logger' /* Things from us */ import { fetchSuitesAndFails, fetchResults } from './actions/actions'; import rootReducer from './reducers/index' const enhancers = compose( window.devToolsExtension ? window.devToolsExtension() : f => f ); const loggerMiddleware = createLogger() /* Store */ export const store = createStore( rootReducer, enhancers, applyMiddleware( thunkMiddleware, // lets us dispatch() functions loggerMiddleware // neat middleware that logs actions ) ); // Export the history so we can keep track of things export const history = syncHistoryWithStore(browserHistory, store); /* Enable Hot Reloading for the reducers We re-require() the reducers whenever any new code has been written. Webpack will handle the rest */ if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('./reducers/index', () => { const nextRootReducer = require('./reducers/index').default store.replaceReducer(nextRootReducer) }) }
指数
/* React router needs */ import { combineReducers } from 'redux' import { routerReducer } from 'react-router-redux' /* Reducers */ import suite from './suite' import suitesandfails from './suitesandfails' import routing from './routing' /* Put them all together and return a single reducer */ const rootReducer = combineReducers({ suite, suitesandfails, routing, routing: routerReducer }) export default rootReducer
Kokovin Vlad.. 8
您可以使用字符串"@@ router/LOCATION_CHANGE"来捕获操作.
react-router-redux为此提供了const
import { LOCATION_CHANGE } from 'react-router-redux'
.... case LOCATION_CHANGE: console.warn('LOCATION_CHANGE from your reducer',action) return state
webpackbin DEMO
来自react-router-redux的routerReducer代码
您可以使用字符串"@@ router/LOCATION_CHANGE"来捕获操作.
react-router-redux为此提供了const
import { LOCATION_CHANGE } from 'react-router-redux'
.... case LOCATION_CHANGE: console.warn('LOCATION_CHANGE from your reducer',action) return state
webpackbin DEMO
来自react-router-redux的routerReducer代码