CODEWITHSUNDEEP
javascriptreactjsredux
kayak
kayak

Reputation: 438

React - importing todos but I don't see it in the file

I'm doing Redux tutorial. In that I found a code that I can't understand.

In MainReducer file it says import todos from './TodoReducer' but there's no todos in TodoReducer.js file but it's still working. todos seems to be a state name by the way. Why does this still work?

The whole source can be found in: 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;

Upvotes: 0

Views: 47

Answers (2)

Moti Korets
Moti Korets

Reputation: 3748

This is how defalut exports work. Whatever is being called in the format

import whatever from './TodoReducer'

whatever will be assigned the default export from './TodoReducer'. This is in contrast to named exports when you call

export Something;

You must import it using the same name as 

import { Something } from './TodoReducer'

note the curly braces here. For more information read export documentation on MDN site

Upvotes: 1

niks
niks

Reputation: 466

todos is just a name that you are giving to call function which is TodoReducer, It is not the name that should be present in the function, it can be anything.

For you, path that you are providing should be proper.

Upvotes: 1

Related Questions