我等不及了,我开始使用react-routerv4 的最新alpha版本.全新<BrowserRouter/>功能非常适合保持您的UI与浏览器历史记录同步,但如何使用它以编程方式进行导航?
我一直试图弄清楚这一点,我越来越困惑.
我想在每次离开或改变路线时重置/改变Redux状态.我使用react-router-redux与history.listener调度的动作,每次路由变化
history.listen(location => store.dispatch(resetManualsCategory()));
Run Code Online (Sandbox Code Playgroud)
行动创造者:
export function resetManualsCategory() {
return {
type: 'RESET_MANUALS_CATEGORY'
}
}
Run Code Online (Sandbox Code Playgroud)
减速器
export function manualCategories(state=[], action) {
switch (action.type) {
case 'SELECT_MANUALS_CATEGORY':
[...]
case 'RESET_MANUALS_CATEGORY':
console.log('test reducer');
return Object.assign({}, state, {
manualCategory: 'test'
})
default:
return state
}
}
Run Code Online (Sandbox Code Playgroud)
令我困惑的是,如果我刷新页面或在顶部导航中的路线上单击两次,状态会更新,但是单个路径更改不会影响redux状态,即使操作和reducer触发(显示测试消息)控制台).
我做错了什么,这里到底发生了什么?
我正在创建一个类似横幅的组件,图像设置为组件的背景,但我无法让它工作.我尝试了网上发布的不同建议,但没有运气,目前我不确定我的错误是否在反应代码中,或者是没有正确加载文件的webpack.
这是我的文件结构:
AppFolder
- client/
-- components/
-- data/
-- images/
----- banners/
------- frontPageBanner2.png
-------
-- styles/
-- myApp.js
-- store.js
---------
- index.html
- package.json
- webpack.config.dev.js
Run Code Online (Sandbox Code Playgroud)
这是我的webpack配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/myApp'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel'],
presets: ['es2015', …Run Code Online (Sandbox Code Playgroud)