Skip to content
A simple application created in React with Mobx and Mobx-State-Tree for learning purpose.
Branch: master
Clone or download
Samuel
Latest commit e94c010 Jan 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples add app backend and frontend information Sep 20, 2017
src remove relying on function name inference in projectStore Sep 5, 2017
.gitignore add initial commit of fetch-data-from-api example Sep 18, 2017
LICENSE Initial commit Aug 24, 2017
README.md
bs-config.json initial commit Aug 24, 2017
karma.conf.js initial commit Aug 24, 2017
package-lock.json update react version to solve build error Jan 31, 2018
package.json update react version to solve build error Jan 31, 2018
spec-finder.js initial commit Aug 24, 2017
tsconfig.json initial commit Aug 24, 2017
webpack.config.js initial commit Aug 24, 2017

README.md

react-mobx-mobxstatetree

What This Repo Is

A simple application created in React with Mobx and Mobx-State-Tree for learning purpose. Its integration with Redux-DevTools can be found here. Example of fetching data from an API can be found here.

Installing This Repo

Simply download and extract this repo and execute these commands in the terminal.

npm install
npm start

Use npm test to tests the code using Karma and Jasmine.

Opening an Issue

Feel free to open an issue to give a feedback, critique, idea, advice, or anything to the author.

App Notes

Mobx-React

1. Injection

Use Provider and inject to inject a props' property to a react component without the need of passing that props' property to the parent components.

Mobx-State-Tree

1. Using interface from Mobx-State-Tree model

Take modelA which is an mobx-state-tree model for example.

const ModelA = types.model("ModelA", {
    id: types.number
});

Code below shows how to get this modelA interface.

type IModelA = typeof ModelA.Type;

2. Push a model to an array

One way to push a model to an array is using the model interface.

const ModelA = types.model("ModelA", {
    id: types.number
});

type IModelA = typeof ModelA.Type;

const ArrModelA = types.model("ArrModelA", {
    values: types.array(ModelA)
}).action((self) => ({
    add(id: number) {
        self.values.push({
            id: id
        } as IModelA);
    }
}));

3. Handling model update on async action

When an action is async and its callback function update the model (example code shown below), a Cannot modify '{the model}', the object is protected and can only be modified by using an action error will be thrown.

const someModel = types.model("someModel", {
    name: types.string
}).action((self) => ({
    changeNameAsync() {
        someAsyncMethod().then(name => {
            self.name = name; // Error will be thrown because of this statement;
        });
    }
}));

This problem can be solved by using another action as the callback function.

const someModel = types.model("someModel", {
    name: types.string
}).action((self) => ({
    changeNameAsync() {
        someAsyncMethod().then((this as typeof someModel.Type).changeName);
    },
    
    changeName(name) {
        self.name = name;
    }
}));

Testing in Jasmine

1. Expecting an exception

Take functionA which throw an exception for example.

functionA() {
    throw new Error("some random error");
}

To catch functionA's exception in Jasmine, use anonymous function.

expect(() => functionA()).toThrowError();
You can’t perform that action at this time.