Description
Hello, thank you for the wonderful tutorials! I am trying to work my way through the mobx #1 tutorial and I am having problems. The store object (defined as a TodoStore) is not getting defined correctly. Here is my TodoStore.js file; it is very close to identical (I added some labels in the console.log calls) to yours in the video at 4:30:
import { autorun, observable } from "mobx"
class TodoStore {
@observable todos = ["buy milk", "buy eggs"]
@observable filter = ""
}var store = window.store = new TodoStore
export default store
autorun(() => {
console.log("Filter: " + store.filter)
console.log("First item: " + store.todos[0])
})
(Sorry, indentation doesn't come out quite right). When I render the HTML, my console window shows:
Filter: undefined
mobx.module.js:2955 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@1] TypeError: Cannot read property '0' of undefined
at TodoStore.js:14
I can change the value of store.filter with a console assignment, but I cannot assign, inspect, or reference in any way store.todos[0]:
store.todos[0]
VM424:1 Uncaught TypeError: Cannot read property '0' of undefined
at :1:12
Whereas I cannot find anything different between the code in the video at 4:30 (which is not the final checked-in version of the code) and my code, I am the pupil here and I'm sure I have something incorrect. Do you have any advice for me concerning how I might fix this? I am using:
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"mobx": "^3.1.16",
"mobx-react": "^4.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
Thanks for any help you can provide.