How to name a Reducer or Component while importing

Question

I'm learning redux. I don't understand that in the ../reducers/index.js file I can import a reducer, in this case it's called "SearchReducer". But if I look into that file where it is called from, the function used in there is not called "SearchReducer", it is just "export default function" and so on. Could I basically name the reducer as anything I want in the index.js, when importing it?

Here is the ../reducers/index.js

import { combineReducers } from 'redux';
import SearchReducer from './reducer_search';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  search: SearchReducer,
});

export default rootReducer;

Here is the ../reducers/reducer_search.js

import { SEARCH_USER } from '../actions/index';

export default function(state = [], action) {
  switch(action.type) {
  case SEARCH_USER:
    return [ action.payload.data ];
  }
  return state;
}

Shubham Khatri Shubham Khatri · Accepted Answer · 2017-06-21T18:17:06

When exporting the component as default, you can import it by any name, however when your export it as a named export, you need to import it by the same name within {} and then you can rename it like it is done in

  import { reducer as formReducer } from 'redux-form';

How to name a Reducer or Component while importing

1 Answers