Keeps views automatically in sync with state. Please, prefer https://github.com/mobxjs/mobx/discussions for coding questions
@scottschafer use
extendObservable
Thanks, this works. I do have to force a update in my React component when I add the new property. Otherwise it works great.
Code is like this:
const setProperty = (data: object, key: string, val: any) => {
let propertyAdded = false;
if (data[key] === undefined) {
extendObservable(data, { [key]: val });
propertyAdded = true;
} else
data[key] = val;
}
return propertyAdded;
};
export const MyComponent: React.FunctionComponent<Props> = observer((props: Props) => {
const [forceUpdate, setForceUpdate] = React.useState(0);
const handleChange() => {
.
if (setProperty(key, val)) {
setForceUpdate(forceUpdate + 1);
}
Hey guys I'd like to ask how to prevent new beginners in my group to observe unused observables?
e.g. they destruct unused properties of an observable object, or they modified an observable object properties from outside
autorun(() => {
const {a, b, c, d} = observedObject;
console.log(a, b). // He wants to use variable a and b only
// or directly use observedObject here
// console.log(observedObject.a, observeObject.b)
})
// an action to modify observedObject property
setObservable('c', 'hello');This could also happens in a large React component that someone removed a set of observables in render() he didn't want anymore but mobx still observed them.
Hi, I am migrating my code from JS to Typescript and am experiencing the following :
export default class ShellManager{
@observable _shells: {[key: string]: Shell} = {};
constructor(settings: ShellSettings, historyStore: HistoryStore){
console.log('blah');
}
}This code get transpiled to
var ShellManager = /** @class */ (function () {
function ShellManager(settings, historyStore) {
this._shells = {};
console.log('blah');
...This lead me to get the following error message :
Uncaught Error: [mobx] Since strict-mode is enabled, changing observed observable values outside actions is not allowed. Please wrap the code in an `action` if this change is intended. Tried to modify: ShellManager@2._shellsAny clues on what I may do would be welcomed :)
export default class ShellManager{
@observable _shells: {[key: string]: Shell};
constructor(settings: ShellSettings, historyStore: HistoryStore){
runInAction(() => { this._shells = {}; });
console.log('blah');
}
}
why reaction don't trigger?
I'm adding a value to TodoList, however my console is empty.
class TodoList {
@observable
todoList: Todo[] = [];
constructor() {
reaction(
() => this.todoList.length,
() => console.log(`current todos count: ${this.todoList.length} Done todos: ${this.completedTodos} inComplete todos: ${this.inCompletedTodos}`)
);
when(
() => this.todoList.length > 0 && this.todoList.every(todo => todo.isCompleted),
() => console.log('congrats')
);
}
@action
addTodo(name: string) {
this.todoList.push(new Todo(name));
}
@action
removeTodo(name: string) {
const todoIndex = this.todoList.findIndex(t => t.name === name);
if (todoIndex > -1) {
this.todoList.splice(todoIndex, 1);
}
}
@computed
get completedTodos() {
return this.todoList.filter(t => t.isCompleted).length;
}
@computed
get inCompletedTodos() {
return this.todoList.filter(t => !t.isCompleted).length;
}
}
const todolist = new TodoList();
todolist.addTodo('Learm mobx');
https://github.com/mobxjs/mobx/discussions/3049
https://github.com/mobxjs/mobx/discussions/3048
The company I work for is currently looking for a React Developer and knowledge of mobX is key for this position so I thought I will let you guys know. Salary up to 140 pln/h, full-time, 6-month project with flexible working hours and it’s 100% remote.
Here’s the link to the offer, maybe someone will be interested:
https://justjoin.it/offers/devsdata-llc-react-developer-mobx-rxjs-remote
Using MST
[mobx-state-tree] Failed to resolve reference '801214578' to type 'AnonymousModel' (from node: /ability_state_new)
// in the Player model
const PlayerState = types
.model({
....
ability_state_new: types.safeReference(AbilityState)
....
}).
actions(self => {
...
updateAbilityStateNew(params) {
const id = Math.floor(Math.random() * 1e10) + '';
self.ability_state_new = AbilityState.create(Object.assign(params, {id} ))
}
})
// AbilityState model
const AbilityState = types.model({
id: types.identifier,
name: types.optional(types.string, ""),
target_socket_id: types.optional(types.string, ""),
cast_time: types.optional(types.integer, -1),
});Does anyone know why this isn't working as expected and I am getting an error?
Hi All,
Do we have some advanced examples for testing react apps based on mobx/mobx-state-tree libraries?
I'm having issues with error:
"[mobx-state-tree] expected mobx-state-tree model type as argument 1, got undefined instead
33 | }
34 |
> 35 | export const InputModel = types.compose(
| ^
36 | ComponentModel,
37 | types
38 | .model('InputModel', {"
My test is simple, but I'm having issues to find resolution for above issue.
Test:
"describe('Check SignIn rendering', () => {
test('SignIn', () => {
const div = document.createElement('div');
ReactDOM.render(<Provider><SignIn /></Provider>, div);
ReactDOM.unmountComponentAtNode(div);
});
})"
Wish you a nice day and thanks in advance. :)
https://github.com/mobxjs/mobx/discussions/3101
Hey guys, i'm looing for document or tutorial for mobX for react/ react native using functional componet, sadly on main page they use class and it a little bit hard for me to getting started
https://mobx.js.org/react-integration.html shows function components. The Timer object is a class indeed, but that really doesn't matter, see the example tabs on https://mobx.js.org/observable-state.html#makeobservable how to use factory functions or plain objects instead
What is the deciding point when to use useLocalObservable and when to simply use react hooks inside an observer components?
if the state is only consumed / updated locally I'd use react hooks. Observable state is primarily interesting when state is shared wide and far with other components (or when there are really expensive computations)
1 reply
trace() call to the unresponsive component and apparently "[MobX] 'trace(break?)' can only be used inside a tracked computed value or a Reaction. Consider passing in the computed value or reaction explicitly", whereas with 6.3.2 the error is not thrown
@observable.shallow foo = new Map() have exactly the same behavior as foo = observable.map([], {deep: false}) ? We're tracking down a bug in our app that was causing a runaway node process, and I discovered that using the first version, an autorun was not reacting to changes in foo.size.
asyncA has resolved.const obj = {
asyncA = mobx.action(async () => {
await functionThatChangesStateAfterResult();
await anotherFunctionThatChangesStateAfterResult();
});
}
const App = t
.model({
test: t.maybe(t.frozen({})), // works!
test1: t.model({}), // doesn't working
})
.actions(self => ({
setTest(newTest: any = {}) {
self.test = newTest;
},
}));
