regression: observable.map no longer updates observers in 1.3.0

[pdeva]

sample code

       @observable
       filterValues = observable.map({}, {deep: false, name: "filterValues"});

        @action
	setFilterValue(filterName: string, values: string[])
	{
		const strings = values.filter(v => v != null);
		this.filterValues.set(filterName, strings);
	}

this works properly and updates listening components in 1.2.0 but does not update them in 1.3.0

[danielkcz]

Um, I don't see any mobx-react-lite related code in here. Please provide codesandbox with the actual issue. Btw, I don't think you should be using decorator and function call (observable.map) together. It's either this or that.

[pdeva]

@FredyC the reason its mobx-react-lite related is because just changing mobx-react-lite from 1.2.0 to 1.3.0 causes the issue to surface.

i removed the decorator from the observable.map field, and yes it does work normally in 1.2.0 but the issue remains in 1.3.0.

not sure how to create a sandbox for this, since our codebase is so huge and complicated. is there any info, piece of code i can provide that can help get to the bottom of this?

[danielkcz]

Sorry, cannot help it until you show the code that's related to the package or at least some minimal repro of the problem.

[pdeva]

here is some code that uses the mobx-react-lite observer to access the filterValues field shown in the OP:

const EntityFilter = observer(({column}: IFilterValueFetcherProps) => {

        //Another observable accessed here : 'filters'
	const defs = clusterFilterStore.filters.filter(f => f.column == column);

	let initialChecked = true, initialSelected: string[] = [];
	if (defs.length > 0)
	{
		initialChecked = defs[0].include;
		initialSelected = defs[0].items.slice(); //slice cause its a proxy
	}

	const [isIncludedChecked, setIsIncludedChecked] = useState(initialChecked);
	const [selectedItems, setSelectedItems] = useState<string[]>(initialSelected)

        //USES filterValues here
	const list = cubeStateStore.filterValues.get(column);
	const vals: string[] = list ? list : [];
	const filteredItems = vals.filter(it => !selectedItems.includes(it));

	return (
		<>
			{
				(cubeStateStore.cluster && cubeStateStore.entity) &&
				<FilterValueFetcher key={column} column={column}/>
			}
			<Radio.Group value={isIncludedChecked} onChange={onRadioGroupChange}>
				<Radio value={true}>Include</Radio>
				<Radio value={false}>Exclude</Radio>
			</Radio.Group>
			<Select mode="multiple" onChange={onChange} value={selectedItems}>
				{filteredItems.map(v => <Select.Option key={v}>{v}</Select.Option>)}
			</Select>
		</>
	)
});

[mweststrate]

Please create a small sandbox reproduction and describe observed versus expected behavior Op wo 1 mei 2019 08:50 schreef pdeva <[email protected]>:

…

here is some code that uses the mobx-react-lite observer to access the filterValues field shown in the OP: const EntityFilter = observer(({column}: IFilterValueFetcherProps) => { //Another observable accessed here : 'filters' const defs = clusterFilterStore.filters.filter(f => f.column == column); let initialChecked = true, initialSelected: string[] = []; if (defs.length > 0) { initialChecked = defs[0].include; initialSelected = defs[0].items.slice(); //slice cause its a proxy } const [isIncludedChecked, setIsIncludedChecked] = useState(initialChecked); const [selectedItems, setSelectedItems] = useState<string[]>(initialSelected) //USES filterValues here const list = cubeStateStore.filterValues.get(column); const vals: string[] = list ? list : []; const filteredItems = vals.filter(it => !selectedItems.includes(it)); return ( <> { (cubeStateStore.cluster && cubeStateStore.entity) && <FilterValueFetcher key={column} column={column}/> } <Radio.Group value={isIncludedChecked} onChange={onRadioGroupChange}> <Radio value={true}>Include</Radio> <Radio value={false}>Exclude</Radio> </Radio.Group> <Select mode="multiple" onChange={onChange} value={selectedItems}> {filteredItems.map(v => <Select.Option key={v}>{v}</Select.Option>)} </Select> </> ) }); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAN4NBG7XFJRHHKKFSQEF7LPTE4TNANCNFSM4HJRHBBQ> .

[meyer]

I’m experiencing a similar regression. Will try to get a repro up shortly.

[danielkcz]

I think I do smell a culprit. At first, I thought that only PR #130 has landed in 1.3.0, but there was also #119 which I completely forgot about and was mostly experimental.

I've published mobx-react-lite@test which is the same as 1.3.0, but that change is removed. Please do test out your issues with this version and let me know if it helps anything. And of course, if you would be willing to provide reproduction, it would be useful to improve our test cases and prevent such issue in the future.

[meyer]

@FredyC can do, trying now…

[meyer]

@FredyC that seems to fix the issue!

[danielkcz]

@meyer Glad to hear that. As I said, it would be great to see some example of what was actually broken so it won't happen again the future.

[meyer]

@FredyC i’m going to try extract a repro out tonight. Do you have a recommended way for me to debug? I’ve been using mobx dev tools on the working version and the non-working version to see if there are any differences, but there’s probably a better method of debugging.

[danielkcz]

I don't really need you to debug anything. Just try to show some minimal example of the issue with version 1.3.0. Of course, you can also submit PR with an added test case if you like :)

[danielkcz]

I've published official 1.3.1 with the fix. I will close this now and further discussion can continue in #144 which has at least some viable example. This probably wasn't ever related to observable.map alone.