React Router Redux 不可变
React Router Redux Immutable
一直在我的代码中使用 this boilerplate for a while and have been using plain JS objects as the store/state up until I started getting some odd mutations randomly so decided to switch to Immutable.js. Currently I'm trying to implement redux-immutable。我在使用 react-router-redux 和 redux-immutable 时遇到一些问题;不幸的是,我不太了解这些库 'under-the-hood' 所以在调试时遇到很多麻烦。我已按照 redux-immutable README 中的说明进行操作。
在我的 index.js 文件中出现此错误。
Uncaught TypeError: Cannot read property 'toJS' of undefined
index.js
const initialState = Immutable.Map({});
const store = configureStore(initialState);
const history = syncHistoryWithStore(hashHistory, store, {
selectLocationState (state) {
return state.getIn([
'route',
'location'
]).toJS();
}
});
render(
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>,
document.getElementById('root')
);
configureStore.js
const router = routerMiddleware(hashHistory);
const enhancer = compose(
applyMiddleware(thunk, router, logger),
DevTools.instrument(),
persistState(
window.location.href.match(
/[?&]debug_session=([^&]+)\b/
)
)
);
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () =>
store.replaceReducer(require('../reducers'))
);
}
return store;
}
rootReducer.js
import {combineReducers} from 'redux-immutable';
import routing from './Routing';
import Graphing from './Graphing';
import Syncing from './Syncing';
import Navigating from './Navigating';
import Notifying from './Notifying';
const rootReducer = combineReducers({
routing,
Graphing,
Navigating,
Syncing,
Notifying
});
export default rootReducer;
routing.js(路由减速器)
import {LOCATION_CHANGE} from 'react-router-redux';
const initialState = Immutable.fromJS({
location: {}
});
export default (state = initialState, action) => {
if (action.type === LOCATION_CHANGE) {
return state.merge({
location: action.payload
});
}
return state;
};
根据文档,建议使用 routing
作为 reducer 键。所以在这里,您基本上是在尝试使用密钥 routing
而不是 route
访问商店
刚试了下不可变的,如下,
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState(state) {
console.log(state.routing.locationBeforeTransitions);
return state.routing;
}
});
这将 return,
希望对您有所帮助
一直在我的代码中使用 this boilerplate for a while and have been using plain JS objects as the store/state up until I started getting some odd mutations randomly so decided to switch to Immutable.js. Currently I'm trying to implement redux-immutable。我在使用 react-router-redux 和 redux-immutable 时遇到一些问题;不幸的是,我不太了解这些库 'under-the-hood' 所以在调试时遇到很多麻烦。我已按照 redux-immutable README 中的说明进行操作。
在我的 index.js 文件中出现此错误。
Uncaught TypeError: Cannot read property 'toJS' of undefined
index.js
const initialState = Immutable.Map({});
const store = configureStore(initialState);
const history = syncHistoryWithStore(hashHistory, store, {
selectLocationState (state) {
return state.getIn([
'route',
'location'
]).toJS();
}
});
render(
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>,
document.getElementById('root')
);
configureStore.js
const router = routerMiddleware(hashHistory);
const enhancer = compose(
applyMiddleware(thunk, router, logger),
DevTools.instrument(),
persistState(
window.location.href.match(
/[?&]debug_session=([^&]+)\b/
)
)
);
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, enhancer);
if (module.hot) {
module.hot.accept('../reducers', () =>
store.replaceReducer(require('../reducers'))
);
}
return store;
}
rootReducer.js
import {combineReducers} from 'redux-immutable';
import routing from './Routing';
import Graphing from './Graphing';
import Syncing from './Syncing';
import Navigating from './Navigating';
import Notifying from './Notifying';
const rootReducer = combineReducers({
routing,
Graphing,
Navigating,
Syncing,
Notifying
});
export default rootReducer;
routing.js(路由减速器)
import {LOCATION_CHANGE} from 'react-router-redux';
const initialState = Immutable.fromJS({
location: {}
});
export default (state = initialState, action) => {
if (action.type === LOCATION_CHANGE) {
return state.merge({
location: action.payload
});
}
return state;
};
根据文档,建议使用 routing
作为 reducer 键。所以在这里,您基本上是在尝试使用密钥 routing
而不是 route
刚试了下不可变的,如下,
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState(state) {
console.log(state.routing.locationBeforeTransitions);
return state.routing;
}
});
这将 return,
希望对您有所帮助