Redux无括号导出失效及导入todo需括号的问题咨询

兄弟，这事儿其实和Redux本身没啥关系，核心是ES6模块里默认导出和命名导出的区别！我给你掰扯清楚：

• 先看你从./reducers导入todos不需要括号的情况：
  你的reducer文件肯定用了默认导出，写法大概是这样：

  // reducers.js
  export default function todos(state = [], action) {
    // 这里是你的reducer逻辑
  }
  

  ES6里每个文件只能有一个默认导出，导入的时候不用加花括号，甚至你把导入的名字改成myTodosReducer都能正常用，比如import myTodosReducer from './reducers'，完全不影响功能。

• 再看从./actions导入todo必须加括号的情况：
  你的action文件里的todo是命名导出，写法应该是这样：

  // actions.js
  export const todo = () => {
    return { type: 'ADD_TODO', payload: '新待办' }
  }
  

  命名导出可以在一个文件里有多个，导入的时候必须用花括号{}指定你要导入的具体成员。如果不加括号，相当于你要导入这个文件的默认导出，但你的action文件里没写export default，自然就会出问题。

举个混合导出的例子给你加深理解，如果你的action文件同时有默认导出和命名导出：

// actions.js
export default function defaultAddTodo() {
  return { type: 'ADD_TODO', payload: '默认待办' }
}
export const todo = () => {
  return { type: 'ADD_TODO', payload: '自定义待办' }
}

那导入的时候可以这么写：

import DefaultAddTodo, { todo } from './actions'

说白了，就是看你导出的时候用的是export default还是export（命名导出），对应导入时的写法就不一样啦！

内容的提问来源于stack exchange，提问作者Max Wolfen