React Hook useReduxState

 /* eslint-disable react-hooks/rules-of-hooks */

import {useSelector} from 'react-redux';

import get from 'lodash-es/get';

import {RootStateInterface} from './interfaces';

type RootStateKey = keyof RootStateInterface;

type StateKeyWithDots = `.${string}`;

export type RootOrDotsStateKey = RootStateKey | StateKeyWithDots;

interface SelectedStateInterface extends Partial<RootStateInterface> {

    [key: StateKeyWithDots]: any;

}

export function useReduxState (firstStateKey: RootOrDotsStateKey, ...stateKeys: RootOrDotsStateKey[]): SelectedStateInterface {

    stateKeys.push(firstStateKey);

    const selectedState: SelectedStateInterface = {};

    stateKeys.forEach(function (stateKey: RootOrDotsStateKey): void {

        selectedState[stateKey] = useSelector(function (state: RootStateInterface): any {

            if (stateKey.indexOf('.') === 0) {

                return get(state, stateKey.slice(1));

            }

            return state[stateKey];

        });

    });

    return selectedState;

}

    const {

       projectData: {

            value: projectDataValue

        },

        clusterSelect: {

            value: custerValue

        }

        '.buildVersion.ui.requestData': uiVersion

    } = useReduxState(

        'projectsData',

        'clusterSelect',

        'buildVersion'

    );