Recoil: [Question] How to reset a selection of atoms?

Created on 11 Jun 2020  路  2Comments  路  Source: facebookexperimental/Recoil

Note: This question is _not_ about how to keep track of created atoms.

How should we reset a selection of atoms?

I'm using this, but it feels wrong:

const namedResetFilters = selectorFamily<null, FilterKey>({
    key: 'namedResetFilters',
    get: () => () => null,
    set: key => ({ get, reset }) => {
        const summaries = get(namedDirtySummaries(key))

        Object.keys(summaries).forEach(name => {
            reset(namedFilterDescription([key, name]))
            reset(namedFilterEntry([key, name]))
        })

        reset(namedDirtySummaries(key))
    }
})

export const useResetFilterStore = (key: FilterKey) => {
    const reset = useSetRecoilState(namedResetFilters(key))

    return useRefCallback(() => {
        reset(null)
    })
}

(namedDirtySummaries keeps track of keys that are related to an atom family that has been touched)

Since useResetRecoilState is a hook, it can't be used in a loop.

I'm almost sure that in this situation useResetRecoilState(namedResetFilters(key)) wouldn't
work because the selection doesn't have a default value.

Using useSetRecoilState(namedResetFilters(key))(null) works, but it 'feels' wrong having a selection that returns null and has a set only for reset... Is this how I should do to only reset a selection?

question

Most helpful comment

@drarmstr oh! I see, really thanks for the response.

So to someone looking at this question and wondering how my example would be rewritten:

export const useResetFilterStore = (key: FilterKey) => {
    return useRecoilCallback(({ reset, getLoadable }) => () => {
        const summaries = getLoadable(namedDirtySummaries(key)).contents

        Object.keys(summaries).forEach(name => {
            reset(namedFilterDescription([key, name]))
            reset(namedFilterEntry([key, name]))
        })

        reset(namedDirtySummaries(key))
    }, [key])
}

Edit: btw would be nice to have a discussion like storybook for questions like these one 馃

All 2 comments

@Grohden - You can try useRecoilCallback() to use reset in a loop to workaround the React hook restriction.

@drarmstr oh! I see, really thanks for the response.

So to someone looking at this question and wondering how my example would be rewritten:

export const useResetFilterStore = (key: FilterKey) => {
    return useRecoilCallback(({ reset, getLoadable }) => () => {
        const summaries = getLoadable(namedDirtySummaries(key)).contents

        Object.keys(summaries).forEach(name => {
            reset(namedFilterDescription([key, name]))
            reset(namedFilterEntry([key, name]))
        })

        reset(namedDirtySummaries(key))
    }, [key])
}

Edit: btw would be nice to have a discussion like storybook for questions like these one 馃

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yuantongkang picture yuantongkang  路  3Comments

polemius picture polemius  路  3Comments

robsoncezario picture robsoncezario  路  3Comments

adrianbw picture adrianbw  路  3Comments

jamiewinder picture jamiewinder  路  3Comments