Type warning: State is defined but never used.

[lkdm]

I have the following State selector:

const isAustralian = useStore(state =>
        FieldAccessor('subfield', sectionId, 'address', 'country').get()?.value ===
        '8de2f1bc-9d76-40f7-b54a-3fc499189778');

The FieldAccessor function provides a method to access state through the returned get lambda. This code works the way I expect and updates the component whenever the evaluated code changes result.

However, this throws a Typescript warning because state is never used, as a result of my decision to use a function as the selector.

Is there a way to get around this without manually ignoring the type error on the line?

[dai-shi]

(I wonder how FieldAccessor is implemented.)

[lkdm]

Hey @dai-shi, thanks for the reply. FieldAccessor is a bit of a monster, because it serves up a different set of lambdas depending on whether the Field is a 'field' or 'subfield'.

export const FieldAccessor = (kind: 'field' | 'subfield', sectionId: UUID, fieldName: string, subFieldName?: string) =>
    (kind === 'field')
        ? {
            get: () => getField(sectionId, fieldName),
            set: (draftField: FormField) => setField(sectionId, fieldName, draftField),
            create: (draftField: FormField) => createField(sectionId, fieldName, draftField),
            setError: (errorMessage: string) => setFieldError(sectionId, fieldName, errorMessage),
            handleChange: (value: Primitive, validationSchema?: Array<any>) => handleFieldChange(sectionId, fieldName, value, validationSchema)
        }
        : {
            get: () => getSubField(sectionId, fieldName, subFieldName!),
            set: (draftField: Field<'primitive', Primitive>) => setSubField(sectionId, fieldName, subFieldName!, draftField),
            create: (draftField: FormField) => createSubField(sectionId, fieldName, subFieldName!, draftField),
            setError: (errorMessage: string) => setSubFieldError(sectionId, fieldName, subFieldName!, errorMessage),
            handleChange: (value: Primitive, validationSchema?: Array<any>) => handleSubFieldChange(sectionId, fieldName, subFieldName!, value, validationSchema)
        };

const getField = (_sectionId: UUID, _fieldName: string) =>
   getSection(_sectionId as UUID)?.fields?.get(_fieldName);

const getSection = (_sectionId: UUID) =>
    useStore.getState().sections.get(_sectionId as UUID);

[dai-shi]

So, you use useStore.getState(). In this case, state => can just be () =>. However, this is not an expected usage, and may or may not result in an unexpected behavior in concurrent rendering.

[lkdm]

Thanks for the recommendation. Just to clarify; the unexpected usage you are referring to is eliminating the state keyword, the use of functions as selectors, or both?

Thanks!

[dai-shi]

Sorry for the confusion. The unexpected/not-recommended usage is the use of useStore.getState() in selectors. useStore.getState() is meant to be used outside React. Selectors are inside React.