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.
npm i create-global-state-selector
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;
createGlobalStateSelector can accept both object of local slice selector functions or single local slice selector function .
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'
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'
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.
MIT