React redux cross origin error / typeerror 不是函数

Question

尝试从the redux guide构建基本的待办事项应用程序

我看到的所有文件都存在于指南的同一文件夹结构中。但我也有其他文件，生成其他包以用于来自节点服务器的其他路由。

在我引入 redux 之前，该应用程序运行良好。

每当我尝试向 redux 存储发送操作时，都会收到以下两个错误：

Uncaught TypeError: (0 , _actions.addTodo) is not a function
Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. 

从网上看似乎可能是几件事

A) 我正在尝试创建一个包含多个块的应用程序：（我尝试添加 crossOriginLoading attr）

entry: {
    service: APP_DIR + '/service-side/service.index.jsx',
    admin: APP_DIR + '/admin-side/Admin.jsx',
    todo: APP_DIR + '/todo.index.jsx'
},
output: {
    filename: '[name].bundle.js',
    path: BUILD_DIR,
    crossOriginLoading: "anonymous"

B) 将包含的脚本设置为跨域设置：

<script crossorigin type="text/javascript" src="./dist/todo.bundle.js"></script>

C) 使用 CDN？不使用任何 CDN

D) 开发工具设置为

devtool: {
    devtool: 'cheap-module-source-map'
}

我使用 webpack 制作一个包，然后在 HTML 页面上提供该包。该应用程序甚至没有发出任何请求，所以我很困惑为什么会出现 CORS 问题......

还有谁知道我可以尝试调试它吗？

编辑：一堆 React 代码：

索引

import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {createStore} from 'redux'

import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

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

应用程序

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
    <div>
        <AddTodo />
        <VisibleTodoList />
        <Footer />
    </div>
)

export default App

ADDTODO

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

actions/index.js

let nextTodoId = 0
export const addTodo = text => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = filter => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = id => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

Answer 1

尝试在导入时给出完整路径。

 import { addTodo } from '../actions/index'

• 帮助:)