I have following model:

 const AnotherModel = types.model({
    foo: types.string
 });

 export const SomeCollectionModel = types
     .model({
         data: types.array(AnotherModel),
     })
     .views((self) => ({
         getData: () => self.data,
     }))
     .actions((self) => ({
         fetchData: flow(function* fetchData() {
             try {
                 const data =
                     yield service.fetchData();
                 self.data.replace(
                     data.map((f) => AnotherModel.create(f)),
                     // Using plain json instead of create does the same
                 );
             } catch (err) {
                 console.error(err);
             }
         })
    }));

Then I have two React ponents, which I pose with inject and observer.

Parent one (view/page):

pose(
    inject((states) => ({
        fetchData: () =>
            states.myModel.fetchData(),
    })),
    observer,
)

Child one:

pose(
    inject(states => ({
        data: states.myModel.getData()
    })),
    observer
)

I have a re-rednering problem. Initially child ponent doesn't render anything. In the meantime data is fetched (action triggers itself). However data is not updated in child. ponentWillReact doesnt trigger. After changing routes (rerender by router) view gets updated

Do you have any idea? I'm stuck for hours.

I have following model:

 const AnotherModel = types.model({
    foo: types.string
 });

 export const SomeCollectionModel = types
     .model({
         data: types.array(AnotherModel),
     })
     .views((self) => ({
         getData: () => self.data,
     }))
     .actions((self) => ({
         fetchData: flow(function* fetchData() {
             try {
                 const data =
                     yield service.fetchData();
                 self.data.replace(
                     data.map((f) => AnotherModel.create(f)),
                     // Using plain json instead of create does the same
                 );
             } catch (err) {
                 console.error(err);
             }
         })
    }));

Then I have two React ponents, which I pose with inject and observer.

Parent one (view/page):

pose(
    inject((states) => ({
        fetchData: () =>
            states.myModel.fetchData(),
    })),
    observer,
)

Child one:

pose(
    inject(states => ({
        data: states.myModel.getData()
    })),
    observer
)

I have a re-rednering problem. Initially child ponent doesn't render anything. In the meantime data is fetched (action triggers itself). However data is not updated in child. ponentWillReact doesnt trigger. After changing routes (rerender by router) view gets updated

Do you have any idea? I'm stuck for hours.

• javascript
• mobx
• mobx-state-tree

• what versions are you using? i switched to mobx-state-tree from mobx and have had issues described in their docs about nesting observers mobx-react.js/observer-ponent#nesting-caveat – Daniel Lizik Commented May 20, 2020 at 12:34
• also see this github./mobxjs/mobx-state-tree/issues/1060 – Daniel Lizik Commented May 20, 2020 at 12:38

1 Answer 1

1. You don't need to create a view to access your raw data, you can use the prop directly:

inject(states => ({
  data: states.myModel.data
}))

2. You don't need to use observer if you use inject. MyComponent will observe what's inside the inject just fine:

inject(states => ({
  data: states.myModel.data
}))(MyComponent)

3. In this case, you are observing the array, which is a reference. If you update the items of the array, the array itself doesn't change so MyComponent is not re-rendered. You could observe the array length, that way if the length changes, MyComponent is re-rendered, but it's only useful when you add or remove items from the array:

inject(states => ({
  data: states.myModel.data,
  length: states.myModel.data.length
}))(MyComponent)

4. Finally, if want to observe changes to the items of the array even if the length doesn't change, you need to observe the items internally:

inject(states => ({
  data: states.myModel.data,
  length: states.myModel.data.length
}))(MyComponent)

const MyComponent = ({ data }) => (
  <div>{data.map(item => (
    <MyDataItem item={item} />
  ))}
  </div>
)

inject((states, props) => ({
  foo: props.item.foo
}))(MyDataItem)