Redux: Code error in the example explained in the API doc for "combineReducers" ?

Created on 14 Apr 2016  ·  3Comments  ·  Source: reduxjs/redux

In the example described as part of API doc of "combineReducers", at the time of the store creation, "reducer" as a parameter is passed on to createStore in the file "app.js" (let store = createStore(reducer)).

However in "reducers/index.js", the function name is "combineReducers" and not "reducer" (export default combineReducers({..})).

So shouldn't the parameter pass on at the creation of the store be "combineReducers" (Eg: let store = createStore(combineReducers)) ??

Most helpful comment

I'd say no. If you think about it, Redux only has a single reducer function. The fact that this example is using combineReducers to create that function is an implementation detail. As far as app.js is concerned, it doesn't know or care what's going on inside that function, how we created it, or what it's doing.

Also, note that when reducers/index.js does export default combineReducers({}), it's not actually _creating_ a thing named "combineReducers". It's saying "take the result of this function call, whatever it is, and make it the default export." In fact, technically, that output does not even have any real variable name associated with it.

Finally, note that when you do export default, whatever file imports that default export can give any name it wants to the local variable, same as how a function definition can name a parameter something different from whatever variable name was used at the call site. Examples:

function someFunction(a, fred, randomVariableName) {}

const firstVariable = 1;
const theMeaningOfLife = 42;
const aTotallyUselessName = "Whatever";

someFunction(firstVariable, theMeaningOfLife, aTotallyUselessName);

Note how the variable names I define outside the function don't have to have any correspondence with the parameter names inside the function.

Similarly, when exporting:

// fileA.js
export default const aThing = 42;

// fileB.js
import iCanGiveThisAnyNameIWant from "fileA";

All 3 comments

I'd say no. If you think about it, Redux only has a single reducer function. The fact that this example is using combineReducers to create that function is an implementation detail. As far as app.js is concerned, it doesn't know or care what's going on inside that function, how we created it, or what it's doing.

Also, note that when reducers/index.js does export default combineReducers({}), it's not actually _creating_ a thing named "combineReducers". It's saying "take the result of this function call, whatever it is, and make it the default export." In fact, technically, that output does not even have any real variable name associated with it.

Finally, note that when you do export default, whatever file imports that default export can give any name it wants to the local variable, same as how a function definition can name a parameter something different from whatever variable name was used at the call site. Examples:

function someFunction(a, fred, randomVariableName) {}

const firstVariable = 1;
const theMeaningOfLife = 42;
const aTotallyUselessName = "Whatever";

someFunction(firstVariable, theMeaningOfLife, aTotallyUselessName);

Note how the variable names I define outside the function don't have to have any correspondence with the parameter names inside the function.

Similarly, when exporting:

// fileA.js
export default const aThing = 42;

// fileB.js
import iCanGiveThisAnyNameIWant from "fileA";

@markerikson Thank you for these great answers.

Thank you very much @markerikson.

I'm learning Redux to be used with JQuery, minus the knowledge of React. Your answer now helps me to better understand the examples with the React code.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vraa picture vraa  ·  3Comments

ilearnio picture ilearnio  ·  3Comments

rui-ktei picture rui-ktei  ·  3Comments

timdorr picture timdorr  ·  3Comments

wmertens picture wmertens  ·  4Comments