react-router-redux syncHistoryWithStore 崩溃/通过 react-router 传递状态

Question

基本上问题是我无法使用 react-redux 和 react-router 传递状态。在我的组件中，我有这样的代码：

    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 文件中，我有这样的代码：

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 是一个模拟同步服务，只是 returns 模拟数据数组。当我尝试使用 syncHistoryWithStore 执行此操作时，出现错误：

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，或者以其他方式传递状态。 :)

Answer 1

尝试在 console.log()

中使用：...state

Answer 2

对不起，伙计们，这只是我的愚蠢。 :) 我忘了在我的减速器末尾声明 return。 :) 而且，我忘记了将 reducer 与路由结合使用以将其与 syncHistoryWithStore 一起使用。看起来我真的不知道这应该如何工作。

下面是工作示例：

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, combineReducers } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from 'react-redux';
import { syncHistoryWithStore, routerReducer } 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);
        console.log(...state);
    }
    return state;
}

let combinedReducers = combineReducers({
    routing: routerReducer,
    reducer
});

const store = createStore(combinedReducers, 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')
);

react-router-redux syncHistoryWithStore 崩溃/通过 react-router 传递状态

react-router-redux syncHistoryWithStore crash / passing state with react-router

reactjs

react-router

redux

react-redux

react-router-redux