Github上的Redux ToDo示例

Question

I am going through the Redux documentation and starting with the Todo Example here:

https://github.com/reactjs/redux/tree/master/examples/todos

It works fine. There is something basic that I don't understand though. Following is a code snippet from the index.js file that defines the actions:

let nextTodoId = 0
export const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

The entire file can be seen at the following URL:

https://github.com/reactjs/redux/blob/master/examples/todos/src/actions/index.js

As you can see, the variable nextTodoId is initialized outside the 'addtodo' function. I am wondering how is it that the 'nextTodoId' variable does not get reset to 0 every-time the function is called?

Can someone please explain?

Thanks for your time.

Answer 1

nextTodoId is owned by a scope outside of addTodo. Therefore that variable can be accessed from addTodo but is not owned by it so even when you return from the function the variable will exist.

Answer 2

That's a function of how import and require work in Javascript modules. The module loader runs the code in each imported/required file once. After that, it caches the result, and any other modules that import or require that file in the future get the cached version.

So nextTodoId is only initialized the first time that file is import ed/ require d.

Answer 3

The nextTodoId variable is declared in the same scope (module scope) as addTodo function. Content inside a module file is treated as if is enclosed in a scope closure, just like happens with function closures. Modules are evaluated only once, even when they are imported multiple times. Therefore, the nextTodoId variable is declared only once and every time the addTodo function is called will use the current value of nextTodoId variable.