Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-reducer-provider

4.3.0 • Public • Published

Asynchronous/Synchronous React Reducer/Mapper Provider

with Hooks and HOC

Flux/Redux made easy, simple and beyond

react-reducer-provider   License  Github repo Gitlab repo


Quick Start

1 . Add dependency:

package.json:

  ..
  "dependencies"{
    "react": "16.8.0"
    "react-reducer-provider": "4.3.0",
    ..

2 . Create the AsyncReducerProvider, SyncReducerProvider, AsyncMapperProvider or SyncMapperProvider component to manage state:

A . Define the initial state.
B . Define the reducer or mapper function.
C . Define the Reducer or Mapper Provider.

SomeReducerProvider.jsx:

import React from 'react'
import { SyncReducerProvider } from 'react-reducer-provider'
 
const initialState = 0
 
function reduce(prevState, action, param1) {
  switch (action) {
    case 'ACTION1':
      return prevState + param1
    case 'ACTION2':
      return prevState - param1
    default:
      return prevState
  }
}
 
function SomeReducerProvider({ children }) {
  return (
    <SyncReducerProvider
      reducer={reduce}
      initialState={initialState}
    >
      {children}
    </SyncReducerProvider>
  )
}
 
export default SomeReducerProvider

3 . Access the Provider component using 'react-reducer-provider' hooks:

  • useReducer/useMapper.
  • useReducerDispatcher/useMapperDispatcher.
  • useReducerState/useMapperState.

SomeComponent1.jsx[1] => using useReducer:

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

SomeComponent2.jsx[1] => using useReducerDispatcher:

import { useReducerDispatcher } from 'react-reducer-provider'
import React from 'react'
 
export default function SomeComponent2() {
  const dispatch = useReducerDispatcher()
  return (
    <button onClick={() => {
      const newState = dispatch('ACTION2', 1)
      console.info(newState)
    }}>
      Go down!
    </button>
  )
}

SomeComponentN.jsx[1] => using useReducerState:

import { useReducerState } from 'react-reducer-provider'
import React from 'react'
 
export default function SomeComponentN() {
  const currentState = useReducerState()
  return (
    <div>
      Current:{currentState}
    </div>
  )
}

4 . Wrap components which will consume the SomeReducerProvider component:

SomeContainer.jsx:

import SomeComponent1 from './path/to/SomeComponent1'
import SomeComponent2 from './path/to/SomeComponent2'
import SomeComponentN from './path/to/SomeComponentN'
import SomeReducerProvider from '../path/to/SomeReducerProvider'
import React from 'react'
 
export default function SomeContainer() {
  return (
    <SomeReducerProvider>
      <SomeComponent1/>
      <SomeComponent2/>
      <SomeComponentN/>
    </SomeReducerProvider>
  )
}

This SyncReducerProvider example can be checked on line at gmullerb-react-reducer-provider codesandbox:
Edit gmullerb-react-reducer-provider
This SyncReducerProviderwith HOC example can be checked on line at gmullerb-react-reducer-provider codesandbox:
Edit gmullerb-react-reducer-provider
An AsyncReducerProvider example can be checked on line at gmullerb-react-reducer-provider-async codesandbox:
Edit gmullerb-react-reducer-provider-async
An SyncMapperProvider example can be checked on line at gmullerb-react-mapper-provider codesandbox:
Edit gmullerb-react-mapper-provider
An AsyncMapperProvider example can be checked on line at gmullerb-react-mapper-provider-async codesandbox:
Edit gmullerb-react-mapper-provider-async
Examples of use can be looked at basecode-react-ts, basecode-cordova-react-ts, candy-react-router and test files.
[1] Injection can be used in order to improve design, but in favor of quick example this was surrender, look at Injection for injection example.


Goal

With the introduction of React Hooks, in some way using Flux library[1] was deprecated, react-reducer-provider looks to give a quick and easy alternative using hooks to implement Flux with reducers.

[1] Not the Flux architecture.
[2] react-redux makes it too complicated.
[3] Check and Compare with other solutions at bundlephobia.com.
react-reducer-provider is the evolution of react-named-reducer (which is a derivation of react-reducer-context).


You define:

Reducers

or

Mappers


and then you use them through a:

Dispatcher


Prerequisites


Documentation

Contributing

License

MIT License


Remember

  • Use code style verification tools => Encourages Best Practices, Efficiency, Readability and Learnability.
  • Code Review everything => Encourages Functional suitability, Performance Efficiency and Teamwork.
  • If viable, Start testing early => Encourages Reliability and Maintainability.

Additional words

Don't forget:

  • Love what you do.
  • Learn everyday.
  • Learn yourself.
  • Share your knowledge.
  • Think different!.
  • Learn from the past, dream on the future, live and enjoy the present to the max!.
  • Enjoy and Value the Quest (It's where you learn and grow).

At life:

  • Let's act, not complain.
  • Be flexible.

At work:

  • Let's give solutions, not questions.
  • Aim to simplicity not intellectualism.

Install

npm i react-reducer-provider

DownloadsWeekly Downloads

41

Version

4.3.0

License

MIT

Unpacked Size

68.2 kB

Total Files

35

Last publish

Collaborators

  • avatar