在同构应用程序中使用 redux

Posted

技术标签:

【中文标题】在同构应用程序中使用 redux【英文标题】:Use redux in a isomorphic app 【发布时间】:2016-08-10 13:21:25 【问题描述】:

我正在尝试使用 react+redux+express 创建一个同构/通用应用程序,但在从 server.js 创建商店时遇到了一些问题。

在 server.js 我有:

import  configureStore  from './store/configureStore';
const store = configureStore();

在我的 configureStore 中:

import  createStore, applyMiddleware  from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) 
  const store = createStoreWithMiddleware(rootReducer, initialState);

  if (module.hot) 
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => 
      const nextRootReducer = require('../reducers').default
      store.replaceReducer(nextRootReducer)
    )
  

  return store;

我得到这个错误:

TypeError: (0 , _configureStore.configureStore) is not a function

上线:const store = configureStore();

为什么?我做错了什么?

如果有用知道的话,我的目录结构是这样的: - 源代码 - 店铺 ---- configureStore.js -- server.js

【问题讨论】:

【参考方案1】:

您正在导出默认值,因此请删除导入周围的花括号:

import configureStore from './store/configureStore';

或者,从导出中删除 default 并继续使用卷曲。

每当您看到该错误时,这通常是您如何导入/导出函数的原因,因此请密切注意这些错误,一切顺利!

【讨论】:

以上是关于在同构应用程序中使用 redux的主要内容,如果未能解决你的问题,请参考以下文章

在同构的 Redux 应用程序中,最好的做法是保持 API 调用较小,还是一次性发送所有信息?

具有代码拆分和延迟加载减速器的同构 Redux

React 通用 redux-saga 内存泄漏

如何使用 Redux Thunk 处理 fetch() 响应中的错误?

Redux学习及应用

如何在使用同构获取的异常处理承诺后解析 json