开发者问题收集

React Redux 路由器错误

2016-11-30
659

我正在尝试设置一个 Redux + React Router 应用程序。我认为问题出在 ImmutableJS 上,但我不知道如何解决它。

client.js

import { fromJS } from 'immutable'
import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import { AppContainer } from 'react-hot-loader'

import { Provider } from 'react-redux'
import { match, Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import { routerReducer, routerMiddleware } from 'react-router-redux'

function createSelectLocationState(reducerName) {
  let prevRoutingState;
  let prevRoutingStateJS;

  return (state) => {
    const routingState = state.get(reducerName); // or state.routing

    if (!routingState.equals(prevRoutingState)) {
      prevRoutingState = routingState;
      prevRoutingStateJS = routingState.toJS();
    }

    return prevRoutingStateJS;
  };
}

function configureStore(history, initialState) {
  const reducer = combineReducers({
    routing: routerReducer
  });

  return createStore(
    reducer,
    initialState,
    compose(
      applyMiddleware(
        routerMiddleware(history)
      )
    )
  );
}

const initialState = fromJS(window.__INITIAL_STATE__);
const store = configureStore(browserHistory, initialState);
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState('routing')
});
const rootNode = document.getElementById('root');

const renderApp = () => {
  const routes = require('./routes');

  match({ history, routes }, (error, redirectLocation, renderProps) => {
    render(
      <AppContainer>
        <Provider store={store}>
          <Router {...renderProps} />
        </Provider>
      </AppContainer>,
      rootNode
    );
  });
};

// Enable hot reload by react-hot-loader
if (module.hot) {
  const reRenderApp = () => {
    try {
      renderApp();
    } catch (error) {
      const RedBox = require('redbox-react').default;

      render(<RedBox error={error} />, rootNode);
    }
  };

  module.hot.accept('./routes', () => {
    setImmediate(() => {
      // Preventing the hot reloading error from react-router
      unmountComponentAtNode(rootNode);
      reRenderApp();
    });
  });
}

renderApp();

我收到此错误:

Uncaught TypeError: state.get is not a function

在此处输入图像描述

state 此对象中

在此处输入图像描述

我使用 “react”: "^15.3.2" , "redux": "^3.6.0" , "react-router": "^3.0.0"

更新 1 我现在使用 redux-immutable 中的 combineReducers

import {combineReducers} from 'redux-immutable'

但出现错误:

Uncaught TypeError: routingState.equals is not a function

enter image description here

这里:

在此处输入图片说明

更新 2

我修复了上述问题,但还有一个错误

在此处输入图片说明

我发布的所有代码都在 这个 存储库中

2个回答

问题出在 src/index.js 文件中,其中包含 route.js 的 require 语句。

当您 require 具有 defaultes6 模块时,您必须使用 require 模块中的默认值。类似

const routes = require('./routes').default;

这解决了您的问题,而无需对您的 git 存储库进行任何其他更改。

Thaadikkaaran
2016-12-09

您使用的 combineReducers 未使用 immutable 。通过设置 fromJS(blah) ,每个分支都是 immutable ,但不是在状态的最高级别。请改用 redux-immutable

import {combineReducers} from 'redux-immutable';

Johnny Klironomos
2016-11-30