Mobx: How to properly re-mobx an array.

[rexkenley]

Hi

What is the proper way to re-mobx an array? I have an observable array that becomes a regular array when I use sort or filter. As a result as with filter, the objects become ordinary objects instead of observable objects in a foreach.

For sort I just use the observable function again, but don't know how to that with objects in a filter/foreach.

What do you recommend? I currently use Object.assign and that seems to work.

[mweststrate]

Can you give a code example?

Op di 20 mrt. 2018 om 14:25 schreef rexkenley [e-mail]:

Hi

What is the proper way to re-mobx an array? I have an observable array
that becomes a regular array when I use sort or filter. As a result as with
filter, the objects become ordinary objects instead of observable objects
in a foreach.

For sort I just use the observable function again, but don't know how to
that with objects in a filter/foreach.

What do you recommend?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1440, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhCszYMY7zDRwI_tUxGhOoOUNhqkUks5tgQNIgaJpZM4Sx4rr
.

[rexkenley]

https://jsbin.com/cajokuxete/edit?js,console,output

[caesarsol]

hi @rexkenley,
from what I understand you are using MobX in a strange way.
If you could explain in more details and context what kind of result you are trying to get, we may be able to help!

[rexkenley]

@caesarsol

Strange in what way?

For the first problem, I want to resort an observable array based on a certain object property. But sort returns a regular array. I was hoping it would return an observable array.

Second (though I can't replicate it in jsBin) is to filter an observable array, go through each filtered item and update the "observable" item. I tried to use set but it threw me that error about not being an observable object.

What would be the proper way to solve the 2 problems?

[caesarsol]

Ok, but why do you need the sorted array to be observable? Are you modifying it after sorting?
I think you could benefit from the concept of a computed value for this kind of sorting problem.

About the filtering, you are actually modifying each of the array elements and not the array itself, you could make the elements observable for example.

What I meant before was that MobX is usually leveraged to define an observable empty structure, and then the structure is filled with data and used.
I don't mean it's the only way to use it, but I think it helps reasoning about it! :)

[rexkenley]

@caesarsol
1.) Ok, but why do you need the sorted array to be observable? Are you modifying it after sorting?

Yes, I am using the array to populate a material-ui grid that is sortable/movable. A user can "add a row" and move it between existing records.

2.) you could make the elements observable for example.

How do I do that? Like this?
filter().foreach((a) => { a = observable(a); })

3.) What I meant before was that MobX is usually leveraged to define an observable empty structure, and then the structure is filled with data and used.

I did that, although I did not show that in my sample code. Is this correct?

let grid = observable([]);

// data gathering code.
data.foreach((d) => { grid.push(d)});

grid.sort((a,b) => {}) <<< This where I noticed the grid was transformed into an array.

Although I should have read the documentation more carefully. Is it possible I found a mobx4 bug?

Unlike the built-in implementation of the functions sort and reverse, observableArray.sort and reverse will not change the array in-place, but only will return a sorted / reversed copy.

https://mobx.js.org/refguide/array.html

[mweststrate]

2) yes, but than you need a .map. But not that approach will probably not work as you intend to, as it means that any time you need to filter, all observables are lost and recreated.

Instead, as @caesarsol indicated, you should create a clear distinction between your _state_ and the _derivations_, and only apply mutations to the _state_. So apply any mutation you want to the state, and then in your view layer do the sorting filtering.

[rexkenley]

@mweststrate

Makes sense, thanks!

But what if I want to use the filter so that I change only a subset of the observable array.

grid.filter((g) => { return g.isSold; }).foreach((g) => { g.soldDate = new Date(); })

Is this ok?

[mweststrate]

yes that should work fine, assuming g itself is an observable object.

Op di 27 mrt. 2018 om 16:37 schreef rexkenley [e-mail]:

@mweststrate https://github.com/mweststrate

Makes sense, thanks!

But what if I want to use the filter so that I change only a subset of the
observable array.

grid.filter((g) => { return g.isSold; }).foreach((g) => { g.soldDate = new
Date(); })

Is this ok?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1440#issuecomment-376549068, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhI7fXVdsQuDQlqiVi9PM1waoqwXtks5tik6UgaJpZM4Sx4rr
.

[rexkenley]

Cool!

Is Object.assign() ok as well?

grid.filter((g) => { return g.isSold; }).foreach((g) => { Object.assign(g, {soldDate: new Date(), soldBy: "Associate 1"}); })

[mweststrate]

Try it :)

Op di 27 mrt. 2018 om 17:03 schreef rexkenley [e-mail]:

Cool!

Is Object.assign() ok as well?

grid.filter((g) => { return g.isSold; }).foreach((g) => { Object.assign(g,
{soldDate: new Date(), soldBy: "Associate 1"}); })

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1440#issuecomment-376558895, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhM3FkiXcLoxN8IFw_c5URg1I3Oprks5tilS5gaJpZM4Sx4rr
.

[rexkenley]

I did, I just want to make sure it has your stamp of approval.

[mweststrate]

It will work indeed

Op di 27 mrt. 2018 18:38 schreef rexkenley [e-mail]:

I did, I just want to make sure it has your stamp of approval.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1440#issuecomment-376592192, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhHcH9MIR9O79az2fjUiBCwGGMsDjks5timshgaJpZM4Sx4rr
.