2

I'm going through many Redux-tutorials, and something that confuses me, is the fact, that when creating a Redux store with a combined reducer, there often is the reference to a name rootReducer as the root reducer, although it has never been actively named. Is this something like a default behaviour that is taken advantage of? Because it seems to be working like that.

I suspect, it has something to do with the way, the reducers are combined and exported with

export default combineReducers.

Here is an example:

./reducers/combined.js :

import { combineReducers } from 'redux';
import filmReducer from './filmReducer';

export default combineReducers({
  media: filmReducer
});

then, in ./store.js :

import { createStore, applyMiddleware } from 'redux';
... 
import rootReducer from './reducers';    // why can 'rootReducer' be imported?

Anyway, after a long search, I still couldn't find any reference to this phenomena.

Schelmuffsky
  • 320
  • 1
  • 13

2 Answers2

3

You reducer is exported as a default and default imports can be given any name

You could have also called it reducer too. It just depends on what you want to call it

import reducer from './reducers';

Had you not exported the reducer as default but a named export you are expected to use the same name while import

For Example: 

import { combineReducers } from 'redux';
import filmReducer from './filmReducer';

export const reducer = combineReducers({
  media: filmReducer
});

will be imported as

import { reducer } from './reducers/combined';

P.S. You must also note that you can import component from index.js within a directory without specifying the index file in import path. However for any other file name you need to mention the file name for import

Please refer the MDN docs on import

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • but how does the code know what I actually want to import, because `./reducers` is just to directory in witch the actual root reducer `./reducers/combined.js` is. – Schelmuffsky May 22 '20 at 12:49
  • You definitely would need to give a path as `import rootReducer from './reducers/combined';` unless its index.js in which case you can just give the directory name – Shubham Khatri May 22 '20 at 12:53
  • you might have a index.js file in reducer folder which would be importing the reducer from reducer/combined.js and then exporting it again – Shubham Khatri May 22 '20 at 12:56
  • 1
    ahh! `index.js`! here you go! – Schelmuffsky May 22 '20 at 12:56
0

Reducer is a function that takes previous state, the action, then returns a new state.

(previousState, action) => nextState

In redux, there is only one reducer function. It handles all the actions and returns the new state. This reducer function is usually called rootReducer, but you can call it whatever you want. When you create the store, the first argument is the root reducer.

createStore(reducer, [preloadedState], [enhancer])

(check out the doc: https://redux.js.org/api/createstore)

As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

This is from the official documentation to explain what is combineReducers: https://redux.js.org/api/combinereducers

In your code: 

export default combineReducers({
    media: filmReducer
 });

combineReducers returns a reducer function as mentioned above. export default will then export the function so that you can import it from ./store.js

If you want to know more about how import/export works, check this https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Yupeng Li
  • 136
  • 4