时间戳

首页 > 解决方案 > React - 导入待办事项但我在文件中看不到它

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

问题描述

我正在做 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;

标签： javascriptreactjsredux

解决方案

这就是defalut出口的工作方式。格式中调用的任何内容

import whatever from './TodoReducer'

whatever将从“./TodoReducer”分配default导出。这与您调用时的命名导出相反

export Something;

您必须使用与

import { Something } from './TodoReducer'

注意这里的花括号。有关更多信息，请阅读export MDN 网站上的文档

推荐阅读