Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:35
    urugator commented #3215
  • 08:20
    ssstelsss edited #3215
  • 08:19
    ssstelsss edited #3215
  • 08:19
    ssstelsss edited #3215
  • 08:18
    ssstelsss opened #3215
  • 08:18
    ssstelsss labeled #3215
  • Dec 05 18:03
    changeset-bot[bot] commented #3214
  • Dec 05 18:03
    urugator synchronize #3214
  • Dec 05 18:00
    urugator edited #3214
  • Dec 05 12:27
    urugator review_requested #3214
  • Dec 05 12:09
    changeset-bot[bot] commented #3214
  • Dec 05 12:09
    urugator opened #3214
  • Dec 04 21:56
    jamonholmgren commented #2422
  • Dec 04 09:51
    urugator closed #3163
  • Dec 04 09:51
    urugator commented #3163
  • Dec 02 20:17
    changeset-bot[bot] commented #3210
  • Dec 02 20:17
    Nokel81 synchronize #3210
  • Dec 02 20:16
    changeset-bot[bot] commented #3210
  • Dec 02 20:16
    Nokel81 synchronize #3210
  • Dec 02 20:15
    Nokel81 edited #3210
scottschafer
@scottschafer

@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);
    }
Norn Chronos
@OshotOkill

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.

rebrec
@rebrec
This message was deleted
This message was deleted
This message was deleted

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._shells

Any clues on what I may do would be welcomed :)

scottschafer
@scottschafer
@rebrec , it's a little cumbersome, but I think you need to avoid initializing your observable member data when you declare it. So this can work:
export default class ShellManager{
    @observable _shells: {[key: string]: Shell};

    constructor(settings: ShellSettings, historyStore: HistoryStore){
      runInAction(() => { this._shells = {}; });
        console.log('blah');
    }        
}
Yonggoo Noh
@ygnoh
In reaction even if the side effect change some observables, it doesn't need to be an action?
I mean, side effects are already actions?
Yonggoo Noh
@ygnoh
I've also posted this question on https://github.com/mobxjs/mobx/discussions/3032
Jessica Young
@jlysd
hi, new to mobx. Can anyone point me in the right direction on an issue? An observable map is treating all values as changed after assignment to an identical object
itaytal
@itaytal
Hi, noob question:
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');
Yonggoo Noh
@ygnoh
In constructor, you should do makeObservable(this)
itaytal
@itaytal
thanks!
Ghost
@ghost~600d01a8d73408ce4ff99209
Hi all
Nathan
@nspaeth
Is there still a mobx-state-tree gitter? Weirdly, https://github.com/mobxjs/mobx-state-tree/search?q=gitter&type=commits shows that the gitter link was added, but I see no commit that removes it, yet there is no link.
Yonggoo Noh
@ygnoh
Karolina Kosecka
@KarolinaKoseck1_twitter
Hi,
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
And if we have some other places for such messages, please let me know, I don't want to pointlessly spam the group
Realm of the Bits
@RealmOfTheBits_twitter

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?

Realm of the Bits
@RealmOfTheBits_twitter
Alright scratch that I get it
I am not creating a reference
But like I have another quesiton
How do you listen to modifying an objecft? instead of listening to each property at once
Joeseph Rodrigues
@DoWhileGeek
stupid question from an old redux developer just getting started in mobx. I'm seeing a lot of tutorials with deprecated apis and whatnot, so much so that I'm unsure whats modern mobx. Is the state of the art still class components and decorators? Hasnt the larger react community moved on from both concepts?
Riku
@Riku32
Having an issue. In react-router I want to read state but the issue is that the mobx constructor doesn't get the data until after the page is loaded which causes it to think the user is not authenticated
sasastarcevic
@sasastarcevic

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. :)

Kiryl Chetyrbak
@kirylch_twitter
Hey guys. What is preferred way to organize stores in react mobx and why?
User00015
@User00015
For anyone using mobx for angular: Would you recommend it? Has it helped your development cycles compared to angulars built in default state management?
Le Quoc Khanh
@khanh21011999
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
Where can i find these? Thank you guy a lot
Yonggoo Noh
@ygnoh
I've asked a question about reaction scheduler. If you guys know about that, please answer my question!
https://github.com/mobxjs/mobx/discussions/3101
Stanslaus Odhiambo
@stansL
Hi everyone, a quick one. Just started off work on MobX with React, and currently looking at a pattern...the circle store pattern found here => https://github.com/jasonbalinski/circle-store. Any opinion on the pattern with the current updates to MobX?
Virtouzo
@Virtouzo
What is the deciding point when to use useLocalObservable and when to simply use react hooks inside an observer components?
Michel Weststrate
@mweststrate

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
Charlie Matters
@charliematters
Moving from 6.2.2 to 6.2.3 has caused one of my observer-wrapped components to no longer listen to updates in an observable store. Has anyone else seen behaviour like this before I start picking apart my app to work out what's changed?
Michel Weststrate
@mweststrate
nope doesn't ring a bell, changelog doesn't have much either. Maybe a caching or bundling 2 versions problem?
Charlie Matters
@charliematters
It's most likely my fault, but I've added a 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
I don't have enough information for a proper diagnosis so I'll keep digging
Charlie Matters
@charliematters
You're right - something elsewhere in the tree was requiring 6.3.2, so enforcing the new version using the resolutions field solves the problem
Guillaume Delbergue
@guyguy333
Hi. If we consider a server side paginated resource called Item and a UI with dynamic (I can add/remove table) multiple paginated tables of this ressource with different filter, what’s the right way to structure store(s) ? One store instance of same « store class » for each table ?
John Michael Swartz
@graphographer
This is a V5 question: Should @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.
(I'm not insinuating the runaway process was caused by this difference, but if the different behavior of Mobx here is a bug vis-a-vis Mobx, then we can dig deeper and see if in our particular case it may have lead to this condition.)
Hassan Khan-Shaikley
@HassanShaikley_twitter

With MST is it possible to reference more than one type
targetUnit: types.safeReference(PlayerState),

I want to extend this to reference another

Nikolay Babanov
@nbabanov
Hello everyone! I need some help. I need to batch some async actions, but I don't see a way to do this. Look at the code below. I want to update the MobX state / Notify the observers only after asyncA has resolved.
const obj = {
  asyncA = mobx.action(async () => {
    await functionThatChangesStateAfterResult();
    await anotherFunctionThatChangesStateAfterResult();
  });
}
Bitter
@Bittttter
Hello everyone! I need some help. My question is that why types.frozen works in MST(mobx-state-tree) but types.model not. follows is the code:
const App = t
    .model({
        test: t.maybe(t.frozen({})), // works!
        test1: t.model({}), // doesn't working
    })
    .actions(self => ({
        setTest(newTest: any = {}) {
            self.test = newTest;
        },
    }));
jay shah
@jayshah123
Observer are kind of reactions/derivations right ?
akkayy
@akkayy
Hi there, I'm trying to understand the different between mobx-utils/deepObserve vs autorun(()=> toJS(message)). Essentially toJS makes it easy to detect any change to the message object... How does deepObserve differ?