首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react-router-redux syncHistoryWithStore崩溃/通过react-router的状态

react-router-redux syncHistoryWithStore崩溃/通过react-router的状态
EN

Stack Overflow用户
提问于 2017-01-05 04:48:08
回答 0查看 2.3K关注 0票数 2

基本上问题是我不能使用react-redux和react-router来传递状态。在我的组件中,我有一个类似这样的代码:

代码语言:javascript
运行
复制
    export default connect(
    (state, ownProps) => ({
        reduxState: state,
        ownProps
    }),
    dispatch => ({
        onSyncState: (state) => {
            dispatch({type: 'SYNCHRONIZE_STORE', payload: state});
        }
    })
)(Home);

但是,当我尝试通过控制台登录这些道具时,我看到了reduxState: undefined。派单工作正常。所以现在我尝试使用react-router-redux来同步它们。

在我的index.js文件中,我有一个类似这样的代码:

代码语言:javascript
运行
复制
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Home from './Home/Home.component';
import Edit from './Edit/Edit.component';
import './index.css';
import { Router, Route, browserHistory, Redirect, IndexRoute } from 'react-router';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
import categoriesService from './Services/Categories.service'

const initialState = {
    tasks: categoriesService.getTasks(),
    categories: categoriesService.getCategories(),
    currentCategory: 1,
    filterString: '',
    showDone: 'show'
};

function reducer(state = initialState, action) {
    if (action.type === 'SYNCHRONIZE_STORE') {
        console.log(action.payload);
        console.log(state);
    }
}

const store = createStore(reducer, composeWithDevTools());
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Redirect from="/" to="/home/1/show/" />
            <Route path="/" component={App}>
                <IndexRoute component={Home} />
                <Route path="/home/:category/:showDone(/:filter)" component={Home} />
                <Route path="/edit/:category/:task" component={Edit} />
            </Route>
            <Redirect from="*" to="/home/1/show/" />
        </Router>
    </Provider>,
  document.getElementById('root')
);

categoriesService是一个模拟同步服务,它只返回模拟数据数组。当我尝试用syncHistoryWithStore做这件事时,我得到了一个错误:

代码语言:javascript
运行
复制
Uncaught TypeError: Cannot read property 'routing' of undefined
    at defaultSelectLocationState (sync.js:14)
    at syncHistoryWithStore (sync.js:37)
    at eval (index.js:62)
    at Object.<anonymous> (bundle.js:1372)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at eval (multi_main:3)
    at Object.<anonymous> (bundle.js:589)
    at __webpack_require__ (bundle.js:556)
    at bundle.js:579

所以,我没主意了。希望你能帮助修复react-router-redux,或者以某种方式传递状态。:)

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41472969

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档