mobx6: Dynamic action

[mogadanez]

I have helper method that generating typical methods for some actions: for example:

getProductsByCategoryId = generateLoadList("categoryItems", this, "loadingCategoryItems"
        , async ( {categoryId } )=>{ return services.Categories.load( categoryId) }, "categoryItems" )

and even marks it explicitly as action in

 constructor (){
        makeAutoObservable(this, {
            getProductsByCategoryId: action
        })
    }

generateLoadList returns action( ) wrapper:

export function generateLoadList( name, store, loadFlag, loaderFn, targetProp ) {
    return **action**(
        async (options)=>{
            if ( store[loadFlag]) return
            store[loadFlag] = true
            try {
                const result = await loaderFn(options);
                store[targetProp].replace(result)
                return true
            }
            catch (e) {

                store.setError( name, extractErrorMessage(e) )
            }
            finally {
                store[loadFlag] = false
            }
        }
    )
}

but have warning in console:

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: CategoryStore@10.categoryItems
 [MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: CategoryStore@10.loadingCategoryItems

it was working fine in mobx5, what is the right way to migrate it to 6?

[kubk]

You can either disable action enforcing by setting "enforeActions": "never" or wrap all observable assignments into action/runInAction:

            if (store[loadFlag]) return
            store[loadFlag] = true
            try {
                const result = await loaderFn(options);
                runInAction(() => {
                  store[targetProp].replace(result)
                })
                return true
            }
            catch (e) {
                store.setError( name, extractErrorMessage(e) )
            }
            finally {
              runInAction(() => {
                store[loadFlag] = false
              })
            }

[mweststrate]

For more details, see https://mobx.js.org/actions.html#asynchronous-actions

…

On Mon, Nov 30, 2020 at 9:11 AM kubk ***@***.***> wrote: You can either disable action enforcing by setting "enforeActions": "never" or wrap all observable assignments into action/runInAction: if (store[loadFlag]) return store[loadFlag] = true try { const result = await loaderFn(options); runInAction(() => { store[targetProp].replace(result) }) return true } catch (e) { store.setError( name, extractErrorMessage(e) ) } finally { runInAction(() => { store[loadFlag] = false }) } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2651 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBF64US2L7UYFMGRXKDSSNOTNANCNFSM4UG2K4NA> .