无法从 React 库 npm 包 (redux) 导入 reducer [英] Unable to import reducer from React library npm package (redux)

问题描述

我正在尝试创建一个用于导入其他模块的 React 库 npm 包.

该包使用 redux，目的是暴露 reducer，以便它可以被消费应用程序加载.

我使用 create-react-library 来构建基本的库基础结构.

简单来说，我的结构如下.可以在此处查看完整的存储库.

图书馆应用

src/-- editorBase/-- 动作.js-- 组件.js-- 减速器.js-- index.js

我的 index.js 如下所示:

从 './editorBase/EditorSection' 导入 EditorSection从 './editorBase/reducer' 导入 editorReducer导出 {editorReducer}导出 {EditorSection}

我的 reducer.js 如下所示:

导出默认值 = (状态 = {...},行动) =>{开关(动作.类型){case actionsEditor.CONSTANT:...案件 ...:...默认:返回状态；}};

---

消费者应用我的消费应用程序的 index.js 如下所示:

<预><代码>从反应"导入反应从'react-dom' 导入 ReactDOM从'react-redux'导入{提供者}从 './store/configure-store' 导入 configureStore从'./App'导入应用程序const store = configureStore()ReactDOM.render(<提供者商店={商店}><应用程序/></提供者>,document.getElementById('root'))

我的消费应用程序的 reducers.js 如下所示:

import { combineReducers } from redux";从 'config-editor-base' 导入 {editorReducer}const rootReducer = combineReducers({编辑器减速器，});导出默认的 rootReducer；

我的消费者的 configure-store.js 如下所示:

import { createStore, applyMiddleware } from redux";从redux-thunk"导入 thunkMiddleware；从../reducers"导入减速器；const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);导出默认函数 configureStore(initialState) {const store = createStoreWithMiddleware(reducers, initialState);退货商店；}

---

问题当我尝试运行我的消费者应用程序时，我收到一个错误，指出与 redux 状态相关的变量未定义.我已经验证，如果我修改消费者应用程序中的 reducers.js 文件以使用如下相对导入，它会按预期工作.但是，这仅在 react-library-app 设置中用作测试":

从'config-editor-base/src/editorBase/reducer'导入编辑器

非常感谢任何提示.

解决方案

我解决了这个问题.结果在我的 actions.js 中，我导出了名为 editor/... 的常量，这意味着我必须导出我的减速器，以便将其命名为 editor 使其工作.

更新了 index.js:

从 './editorBase/EditorSection' 导入 EditorSection从'./editorBase/reducer'导入编辑器导出 {EditorSection, editor}

更新了 reducers.js:

import { combineReducers } from redux";从 'config-editor-base' 导入 {editor}const rootReducer = combineReducers({编辑，});导出默认的 rootReducer；

I'm trying to create a React library npm package for import into other modules.

The package uses redux and the intention is to expose the reducer, so that it can be loaded by the consuming application.

I've used create-react-library to construct the basic library infrastructure.

In simplified terms, my structure is as below. The full repo can be seen here.

Library application

src/
-- editorBase/
   -- actions.js
   -- Component.js
   -- reducer.js
-- index.js

My index.js looks as below:

import EditorSection from './editorBase/EditorSection'
import editorReducer from './editorBase/reducer'

export {editorReducer}
export {EditorSection}

My reducer.js looks as below:

export default = (
  state = {
    ...
  },
  action
) => {
  switch (action.type) {
    case actionsEditor.CONSTANT:
       ...
    case ...:
       ...
    default:
      return state;
  }
};

---

Consumer application My consuming app's index.js looks as below:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import configureStore from './store/configure-store'
import App from './App'

const store = configureStore()

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

My consuming app's reducers.js looks as below:

import { combineReducers } from "redux";
import {editorReducer} from 'config-editor-base'

const rootReducer = combineReducers({
  editorReducer,
});

export default rootReducer;

My consumer's configure-store.js looks as below:

import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import reducers from "../reducers";

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(reducers, initialState);
  return store;
}

---

The issue When I try to run my consumer application, I get an error which states that variables related to the redux state are undefined. I've verified that if I modify the reducers.js file in the consumer app to use a relative import as below, it works as intended. However, this only works as a 'test' in the react-library-app setup:

import editor from 'config-editor-base/src/editorBase/reducer'

Any hints are greatly appreciated.

解决方案

I got this solved. It turned out in my actions.js I was exporting constants named editor/... which meant I had to export my reducer so that it was named editor for it to work.

Updated index.js:

import EditorSection from './editorBase/EditorSection'
import editor from './editorBase/reducer'

export {EditorSection, editor}

Updated reducers.js:

import { combineReducers } from "redux";
import {editor} from 'config-editor-base'

const rootReducer = combineReducers({
  editor,
});

export default rootReducer;

这篇关于无法从 React 库 npm 包 (redux) 导入 reducer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！