javascript - React - 导入待办事项，但我在文件中没有看到它

Question

我正在做 Redux 教程。我发现了一段我无法理解的代码。

在 MainReducer 文件中，它显示 import todos from './TodoReducer' 但 TodoReducer.js 文件中没有 todos，但它仍然有效。顺便说一句，todos 似乎是一个州名。为什么这仍然有效？

完整的源代码可以在以下位置找到: https://itnext.io/tutorial-simple-react-redux-app-cd559621ec00

MainReducer.js

import { combineReducers } from 'redux'
import todos from './TodoReducer'
import visibilityFilter from './FilterReducer'

export default combineReducers({
  todos,
  visibilityFilter
})

import { ADD_TODO, REMOVE_TODO, TOGGLE_TODO} from '../actions/actionsTypes'

const INITIAL_DATA = []

const TodoReducer = (state=INITIAL_DATA, action) => {
    switch (action.type){
        case ADD_TODO:
        return [
            ...state,{
                id: action.id,
                text: action.text,
                completed: false,
            }
        ]
        case TOGGLE_TODO:
        return state.map(todo =>
        (todo.id === action.id)
          ? {...todo, completed: !todo.completed}
          : todo
         )
        case REMOVE_TODO:
        const numIndex = parseInt(action.id)
        return state.filter(todo => todo.id !== numIndex);
        default:
        return state
    }
}

export default TodoReducer

import {
  SHOW_ALL,
  SET_VISIBILITY_FILTER
} from "../actions/actionsTypes";

const visibilityFilter = (state = SHOW_ALL, action) => {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return action.filter;
    default:
      return state;
  }
};

export default visibilityFilter;

Answer 1

这就是defalut exports工作。无论以何种格式调用

import whatever from './TodoReducer'

whatever 将被分配来自“./TodoReducer”的default 导出。这与 named exports 形成对比当你打电话时

export Something;

您必须使用与

相同的名称导入它

import { Something } from './TodoReducer'

注意这里的花括号。有关更多信息，请阅读export documentation on MDN site