How to use the easy-peasy.useStoreState function in easy-peasy

const EditSubuserModal = forwardRef(({ subuser, ...props }, ref) => {
    const { isSubmitting } = useFormikContext();
    const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
    const permissions = useStoreState(state => state.permissions.data);

    const user = useStoreState(state => state.user.data!);

    // The currently logged in user's permissions. We're going to filter out any permissions
    // that they should not need.
    const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);

    // The permissions that can be modified by this user.
    const editablePermissions = useDeepCompareMemo(() => {
        const cleaned = Object.keys(permissions)
            .map(key => Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`));

        const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));

        if (user.rootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
            return list;
        }

export default () => {
    const interval = useRef(null);
    const timeout = useRef(null);
    const [ visible, setVisible ] = useState(false);
    const progress = useStoreState(state => state.progress.progress);
    const continuous = useStoreState(state => state.progress.continuous);
    const setProgress = useStoreActions(actions => actions.progress.setProgress);

    useEffect(() => {
        return () => {
            timeout.current && clearTimeout(timeout.current);
            interval.current && clearInterval(interval.current);
        };
    }, []);

    useEffect(() => {
        setVisible((progress || 0) > 0);

        if (progress === 100) {
            // @ts-ignore
            timeout.current = setTimeout(() => setProgress(undefined), 500);
        }

const EditSubuserModal = forwardRef(({ subuser, ...props }, ref) => {
    const { isSubmitting } = useFormikContext();
    const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
    const permissions = useStoreState(state => state.permissions.data);

    const user = useStoreState(state => state.user.data!);

    // The currently logged in user's permissions. We're going to filter out any permissions
    // that they should not need.
    const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);

    // The permissions that can be modified by this user.
    const editablePermissions = useDeepCompareMemo(() => {
        const cleaned = Object.keys(permissions)
            .map(key => Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`));

        const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));

        if (user.rootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
            return list;

export default () => {
    const interval = useRef(null);
    const timeout = useRef(null);
    const [ visible, setVisible ] = useState(false);
    const progress = useStoreState(state => state.progress.progress);
    const continuous = useStoreState(state => state.progress.continuous);
    const setProgress = useStoreActions(actions => actions.progress.setProgress);

    useEffect(() => {
        return () => {
            timeout.current && clearTimeout(timeout.current);
            interval.current && clearInterval(interval.current);
        };
    }, []);

    useEffect(() => {
        setVisible((progress || 0) > 0);

        if (progress === 100) {
            // @ts-ignore
            timeout.current = setTimeout(() => setProgress(undefined), 500);

stateUndefined: undefined;
  stateUnion: string | null;
  actionImp: Action;
  actionNoPayload: Action;
  thunkImp: Thunk;
  reducerImp: Reducer;
  nested: {
    actionImp: Action;
    thunkImp: Thunk;
  };
}

let dispatch = useStoreDispatch();
dispatch({ type: 'FOO' });

let useStoreResult = useStoreState((state: State) => state.stateNumber);
useStoreResult + 1;
let useActionResult = useStoreActions(
  (actions: Actions) => actions.actionImp,
);
useActionResult(1);

let store = useStore();
store.getState().stateString + 'world';

const typedHooks = createTypedHooks();

useStoreResult = typedHooks.useStoreState(state => state.stateNumber);
useStoreResult + 1;
useActionResult = typedHooks.useStoreActions(actions => actions.actionImp);
useActionResult(1);
dispatch = typedHooks.useStoreDispatch();

export default () => {
    const username = useStoreState(state => state.user.data!.username);
    const id = ServerContext.useStoreState(state => state.server.data!.id);
    const sftpIp = ServerContext.useStoreState(state => state.server.data!.sftpDetails.ip);
    const sftpPort = ServerContext.useStoreState(state => state.server.data!.sftpDetails.port);

    return (
        
            
            <div>
                <div>
                    
                        
                            <div>
                                <label>Server Address</label>
                                </div></div></div>

export default ({ defaultPermissions }: Props) => {
    const { t } = useTranslation('server.users');
    const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);

    return (
        <div>
            {
                permissions.map(permission =&gt; (
                    <div>
                        <input value="{permission}" name="{'permissions[]'}" type="{'checkbox'}" id="{`permission_${permission}`}">= 0}
                        /&gt;
                        </div></div>

export default ({ className, spacerClass, byKey }: Props) => {
    const flashes = useStoreState((state: State) => state.flashes.items);

    let filtered = flashes;
    if (byKey) {
        filtered = flashes.filter(flash => flash.key === byKey);
    }

    if (filtered.length === 0) {
        return null;
    }

    return (
        <div>
            {
                filtered.map((flash, index) =&gt; (
                    
                        {index &gt; 0 &amp;&amp; <div></div>}</div>

export default () => {
    const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
    const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);

    return (
        
            <div style="{{">
                <div id="{'logo'}">
                    
                        {name}
                    
                </div>
                
                    
                    
                        
                    
                    </div>