Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Create global state selectors from local redux slice selectors.

License

NotificationsYou must be signed in to change notification settings

ashish-r/create-global-state-selector

Repository files navigation

Publish PackagecodecovDeepScan gradeLicense: MITFOSSA StatusBundlephobia

Create global state selectors from local redux slice selectors.Inredux each of the slices is autonomous and the final store structure is defined by how the individual slices are merged withcombineReducers.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 usesredux-toolkit however you can usecreateGlobalStateSelector with any standard Flux pattern that has multiple independent stores/slices, and are merged together withcombineReducers.

// personalDetailsSlice.jsimport { 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.jsimport { 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 combineReducersconst store = { a: { b: { x: 55, y: 65, z: 'temp' } } };selectX(store); // 55selectY(store); // 65selectZ(store); // 'temp'

Pass a local slice selector

const selectZ = createGlobalStateSelector((state: Record<string, any>): number => state.z, 'a', 'b');// Final store signature after combineReducersconst store = { a: { b: { x: 55, y: 65, z: 'temp' } } };selectZ(store); // 'temp'

FYI

createGlobalStateSelector usesObject.fromEntries andObject.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

[8]ページ先頭
©2009-2025 Movatter.jp