Question

我正在做Redux教程。这样我找到了我不懂的代码。

在MainReducer文件中，它显示为import todos from './TodoReducer'，但TodoReducer.js文件中没有待办事项，但仍在工作。顺便说一下，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

Answer 2

todos只是您给调用函数TodoReducer的名称，函数中不应出现该名称，可以是任何东西。

对于您来说，您提供的路径应该正确。

React-导入待办事项，但我在文件中看不到

2 个答案: