Singleton Reducer/Mapper Provider

If no id (name, number or symbol) is provided a “unique”[1] Reducer will be created.

[1] This is a convention, i.e. is up to the developer not to created more Reducer Provider. Worth mentioning that unidentified and identified Reducer Providers can be combined.

function SomeReducerProvider({ children }) {
  return (
    <SyncReducerProvider
      reducer={reduce}
      initialState={initialState}
    >
      {children}
    </SyncReducerProvider>
  )
}

export default SomeReducerProvider

When accessing the provider, the id is not required:

  export default function SomeComponent1() {
    const [ state, dispatch ] = useReducer()
    return (
      <button onClick={() => dispatch('ACTION1')}>
        Go up (from {state})!
      </button>
    )
  }

or

  export default function SomeComponent2() {
    const dispatch = useReducerDispatcher()
    return (
      <button onClick={() => dispatch('ACTION2')}>
        Go down!
      </button>
    )
  }

or

  export default function SomeComponentN() {
    const currentState = useReducerState()
    return (
      <div>
        Current:{currentState}
      </div>
    )
  }

An asynchronous example can be checked on line at gmullerb-react-reducer-provider-async codesandbox:

Examples of use can be looked at basecode-react-ts and basecode-cordova-react-ts.

---

More Documentation

• AsyncReducerProvider · SyncReducerProvider · AsyncMapperProvider · SyncMapperProvider.
• useReducer · useReducerState · useReducerDispatcher · useMapper · useMapperState · useMapperDispatcher.
• injectReducer · injectReducerState · injectReducerDispatcher · injectMapper · injectMapperState · injectMapperDispatcher.
• Nesting.
• Combining/Blending - Tagged Reducers/Mappers.
  • AsyncTaggedReducerProvider · SyncTaggedReducerProvider · AsyncTaggedMapperProvider · SyncTaggedMapperProvider.
  • useTaggedAny · useTaggedReducer · useTaggedReducerState · useTaggedReducerDispatcher · useTaggedMapper · useTaggedMapperState · useTaggedMapperDispatcher.
  • injectTaggedAny · injectTaggedReducer · injectTaggedReducerState · injectTaggedReducerDispatcher · injectTaggedMapper · injectTaggedMapperState · injectTaggedMapperDispatcher.
• Typings.
• With Injection.
  • with Flow typings.
  • with Typescript typings.
• With Actions Creators.
  • with Flow typings.
  • with Typescript typings.
• Testing.
• Examples from tests.
• Online examples.
• Typings’ examples from tests.
• Extending/Developing.

Main documentation

Back to homepage