Skip to main content

getSelectField()

function getSelectField(stateName: string): (fieldName: string | string[], defaultValue: unknown) => (state: {
}, stateValue: unknown) => unknown;

Why use this? It will prevent unnecessary rerenders hence improving performance, it also reduces the amount of code needed to select data from the store hence making it easier and keeping your codebase smaller and easier to maintain.

For this to work as expected, ensure you always select ONLY what you need. Don't select state objects that contain fields that you won't use, if you do so then everytime any of those gets updated it will trigger a rerender even though you're not actually using that field.

Parameters​

stateName​

string

the redux store's state name of the state you want to access.

Returns​

A selectField function that returns a selector function to be used inside a useSelector hook or a select side effect

(fieldName: string | string[], defaultValue: unknown) => (state: { }, stateValue: unknown) => unknown

Description​

Generic Redux State Selector Helper.

Example​

// reducer.js
import { getSelectField } from 'elliemae/pui-app-sdk';

const name = 'someState';
export selectSomeState = getSelectField(name);

// use-some-state.js hook. NOTE: You can create a hook for each main state
import { selectSomeState } from 'slices/some-slice';
import { useSelector, shallowEqual } from 'react-redux';

export const useSelectSomeState = (fieldName, defaultValue) => {
 const finalDefaultValue = useMemo(() => defaultValue, []);
 useSelector(selectSomeState(fieldName, finalDefaultValue), shallowEqual);
}

// some-component.js
import { useSelectSomeState } from 'custom-hooks/state-selectors.js'

export const SomeComponent = () => {
  const someField = useSelectSomeState('someField');
  ...
}
export const SomeOtherComponent = () => {
  const someSubField = useSelectSomeState('someField.someSubField');
  ...
}
export const AnotherComponent = () => {
  const [firstField, secondField, thirdField] = useSelectSomeState(['firstField', 'secondField', 'thirdField']);
  ...
}