[React Native] MobX + FlatList кто использует такую связку?

[ksa]

если там массив объектов, который @observable (то есть deep), то slice() вернёт массив отслеживаемых объектов, это ведь поверхностная копия.

Мы и по "массиву" проходились фором, каждый элемент делали обычным объектом и вставляли в новый массив.
В консоли все нормально, но тут же ошибка про попытку менять отслеживаемые данные...
Скоро поеду на работу - сделаем примеры, покажу тут.

[ksa]

Ситуация получается более запутанной...
Сделал я тестик простенький и у меня все заработало без всяких предупреждений!

Хранилище

import {makeAutoObservable} from 'mobx'

class Test {
	data = {
		arr: [
		    {id: '0', name: 'Item 0'},
		    {id: '1', name: 'Item 1'},
		    {id: '2', name: 'Item 2'},
		]
	}
	constructor(props) {
		makeAutoObservable(this)
	}
	add(obj) {
	    this.data.arr.push(obj)
	}
}

export default new Test()

Собственно экран

import React from "react"
import { StyleSheet, Text, View, Button, FlatList } from 'react-native'
import { observer} from 'mobx-react-lite'
import { toJS } from "mobx"

import test from '../store/test'

function Test() {
    //console.log(1, test.data.arr)
	const arr = toJS(test.data.arr)
    //console.log(2, test.data.arr)

	const renderItem = ({ item }) => (
	    <Text>{item.name}</Text>
	)

	return (
	    <View style={styles.container}>
    	    <View style={styles.container}>
    	        <Button
    	            title='Add'
    	            onPress={add}
    	        />
    	    </View>
            <FlatList
                data={test.data.arr}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
	    </View>
	)
    function add() {
        const l = test.data.arr.length
        test.add({
            id: l.toString(),
            name: 'Item ' + l
        })
    }
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	tab: {
	    margin: 50
	}
})

export default observer(Test)

Все рисуется и так нормально... НО!
если убрать

const arr = toJS(test.data.arr)

Перестает работать добавление элементов.
Возвращаю эту строку - работает добавление.

А по предыдущей проблеме - сказал чтобы ребята начали искать у себя проблемы глубже...

[ksa]

сказал чтобы ребята начали искать у себя проблемы глубже...

Выяснили следующее...
Было асинхронное чтение данных с сервера. Изменение состояния обернули в runInAction() из mobx и ошибка ушла. FlatList стал отображать данные из хранилища mobx без замечаний.

Но по моему примеру все еще интересно что так влияет на работоспособность кнопки Add в моем примере?

[Alexandroppolus]

Но по моему примеру все еще интересно что так влияет на работоспособность кнопки Add в моем примере?

кнопка Add работает, просто компонент не перерисовывается

без toJS ты читаешь только test.data.arr (и как следствие подписываешься только на изменение test.data.arr), а он не меняется, массив тот же самый, только в него запушили.

вызов toJS(test.data.arr) делает чтение вообще всего, что есть внутри массива, и соответственно подписки будут на все изменения.

и конечно, здесь не самая экономичная схема перерендеров. Что-то поменяли, и перерендеривается всё. Тут надо тоже смотреть по ситуации, как лучше сделать, и разумеется, без toJS

[Alexandroppolus]

Изменение состояния обернули в runInAction() из mobx и ошибка ушла.

а в тестовом примере изменения стейта были внутри сторовского метода add, который по воле makeAutoObservable обернулся в action и получил право менять данные.

[ksa]

просто компонент не перерисовывается

Вона че...

в тестовом примере изменения стейта были внутри сторовского метода add, который по воле makeAutoObservable обернулся в action и получил право менять данные

Так вот я и думал что это даст возможность рендеренга FlatList... А оно видал как.

Тут надо тоже смотреть по ситуации, как лучше сделать, и разумеется, без toJS

И что можно придумать "альтернативного"?
В "простом" Реакте вполне хватало использования "сторных" методов и все перерисовывалось...
А теперь этого мало...

[Aetae]

А потому, что он цепляется через жёпу. Потому что реакт - не расширяем нихрена. Вызовы рендера: стейт - отдельно, пропс - отдельно, нужен стор? - тоже отдельно.

Можешь попробовать энтот твой FlatList в <Observer><FlatList ...></Observer> заключить, но это так - выстрел в небо, загружать сейчас в голову весь контекст как оно там на самом деле работает откровенно лень.)

[Alexandroppolus]

Вызовы рендера: стейт - отдельно, пропс - отдельно, нужен стор? - тоже отдельно.

но ведь сам рендер вызывается однократно, если в коде синхронно поменялось и то и другое и третье, так что не проблема

Можешь попробовать энтот твой FlatList в <Observer><FlatList ...></Observer> заключить

не поможет, FlatList от этого не станет обзервером

я бы попробовал так:
const MobxFlatList = observer(FlatList)

и потом юзать MobxFlatList. А уж если такое не поможет - менять массив иммутабельно, то есть вместо test.data.arr.push(newItem) делать test.data.arr = [...test.data.arr, newItem]
ну и там далее ещё кое-где поменять.

использовать в рендере toJS - это антиMobX

[ksa]

<Observer><FlatList ...></Observer>

Это первое что мы опробовали...
Не помогает.

const MobxFlatList = observer(FlatList)

Ща спробанем!

test.data.arr = [...test.data.arr, newItem]

Опробую и это...

использовать в рендере toJS - это антиMobX

Это-то понятно...

[ksa]

const MobxFlatList = observer(FlatList)

Сделал так...

import React from "react"
import { StyleSheet, Text, View, Button, FlatList } from 'react-native'
import { observer} from 'mobx-react-lite'
import { toJS, runInAction } from "mobx"

import test from '../store/test'

function Test() {
	//const arr = toJS(test.data.arr)

	const renderItem = ({ item }) => (
	    <Text>{item.name}</Text>
	)

	const MobxFlatList = observer(FlatList)

	return (
	    <View style={styles.container}>
    	    <View style={styles.tab}>
    	        <Button
    	            title='Add'
    	            onPress={add}
    	        />
    	    </View>
            <MobxFlatList
                data={test.data.arr}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
	    </View>
	)
    function add() {
        const l = test.data.arr.length
        test.add({
            id: l.toString(),
            name: 'Item ' + l
        })
    }
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		color: '#000',
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	tab: {
	    margin: 70
	}
})

export default observer(Test)

Ошибка

Cannot call a class as a function