create-global-state-selector

Create global state selectors from local redux slice selectors. In redux each of the slices is autonomous and the final store structure is defined by how the individual slices are merged with combineReducers. createGlobalStateSelector takes local slice selectors and the slice structure to return global state selectors.

Install

npm i create-global-state-selector

Uses

The example below uses redux-toolkit however you can use createGlobalStateSelector with any standard Flux pattern that has multiple independent stores/slices, and are merged together with combineReducers.

// personalDetailsSlice.js

import { createSlice } from '@reduxjs/toolkit';
import createGlobalStateSelector from 'create-global-state-selector';

export const sliceKey = 'personalDetails';
const initialState = {
  name: 'Ashish',
  age: '26',
  isEligibleToDrink: true
};

const { actions, reducer } = createSlice({
  name: sliceKey,
  initialState,
  reducers: {
    setName(state, { payload }) {
      state.name = payload;
    },
    setAge(state, { payload }) {
      state.age = payload;
    },
    setDrinkingEligibilityBasedOnAge(state) {
      state.isEligibleToDrink = selectLocalAge(state) >= 18;
    }
  }
});

function selectLocalName(state) {
  return state.name;
}
function selectLocalAge(state) {
  return state.age;
}
function selectLocalIsEligibleToDrink(state) {
  return state.isEligibleToDrink;
}

export default reducer;
export const { setName, setAge, setDrinkingEligibilityBasedOnAge } = actions;

export const { selectName, selectAge, selectIsEligibleToDrink } = createGlobalStateSelector(
  {
    selectName: selectLocalName,
    selectAge: selectLocalAge,
    selectIsEligibleToDrink: selectLocalIsEligibleToDrink
  },
  sliceKey
);

// Global selectors created from local slice selectors
// final store structure: state = { [sliceKey] : { name: 'Ashish', age: 26 } }
// selectName(state) // 'Ashish'
// selectAge(state) // 26

// store.js

import { createStore, combineReducers } from 'redux';
import personalDetailsReducer, { sliceKey as personalDetailsSliceKey } from './personalDetailsSlice';

const reducer = combineReducers({
  [personalDetailsSliceKey]: personalDetailsReducer
});
const store = createStore(reducer);
// { personalDetails : { name: 'Ashish', age: '26', isEligibleToDrink: true } }

export default store;

API Examples (createGlobalStateSelector)

createGlobalStateSelector can accept both object of local slice selector functions or single local slice selector function .

Pass an object of local slice selectors

const { selectX, selectY, selectZ } = createGlobalStateSelector(
  {
    selectX: (state: Record<string, any>): number => state.x,
    selectY: (state: Record<string, any>): number => state.y,
    selectZ: (state: Record<string, any>): string => state.z
  },
  'a',
  'b'
);

// Final store signature after combineReducers
const store = { a: { b: { x: 55, y: 65, z: 'temp' } } };

selectX(store); // 55
selectY(store); // 65
selectZ(store); // 'temp'

Pass a local slice selector

const selectZ = createGlobalStateSelector((state: Record<string, any>): number => state.z, 'a', 'b');

// Final store signature after combineReducers
const store = { a: { b: { x: 55, y: 65, z: 'temp' } } };

selectZ(store); // 'temp'

FYI

createGlobalStateSelector uses Object.fromEntries and Object.entries which are not pollyfilled to reduce the package size. If needed, please add your own polyfills, or target your polyfills accordingly for Babel, Webpack, Rollup, etc.

License

MIT