react-named-reducer

React Component to easily manage State through reducers using hooks. with typings for Typescript and Flow

Usage no npm install needed!

<script type="module">
  import reactNamedReducer from 'https://cdn.skypack.dev/react-named-reducer';
</script>

README

React Component to easily manage State through reducers using hooks

with typings for Typescript and Flow.

A derivation of react-reducer-context


license GitHub package.json version coverage react-named-reducer

This project is licensed under the terms of the MIT license.


Quick Start

1 . Add dependency:

package.json:

  ..
  "dependencies": {
    "react": "^16.8.0"
    "react-named-reducer": "2.0.1",
    ..

2 . Create the NamedReducer component to manage state:

  • Define the initial state.
  • Define the reducer function.
  • Define the NamedReducer.

SomeNamedReducer.jsx:

import React from 'react'
import { NamedReducer } from 'react-named-reducer'

const initialState = 0

function reduce(prevState, action) {
  switch (action) {
    case 'ACTION1':
      return prevState + 1
    case 'ACTION2':
      return prevState - 1
    default:
      return prevState
  }
}

function SomeNamedReducer({ children }) {
  return (
    <NamedReducer
      name='someNamedReducer'
      reducer={reduce}
      initialState={initialState}
    >
      {children}
    </NamedReducer>
  )
}

export default SomeNamedReducer

3 . Wrap components which needs the NamedReducer component:

SomeContainer.jsx:

import SomeComponent1 from './path/to/SomeComponent1'
import SomeComponent2 from './path/to/SomeComponent2'
import SomeComponentN from './path/to/SomeComponentN'
import SomeNamedReducer from '../path/to/SomeNamedReducer'
import React from 'react'

export default function SomeContainer() {
  return (
    <SomeNamedReducer>
      <SomeComponent1/>
      <SomeComponent2/>
      <SomeComponentN/>
    </SomeNamedReducer>
  )
}

4 . Access the NamedReducer component using 'react-named-reducer' hooks:

  • useNamedReducer.
  • useReducerDispatcher.
  • useReducerState.

SomeComponent1.jsx[1] => using useNamedReducer:

import { useNamedReducer } from 'react-named-reducer'
import React from 'react'

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

SomeComponent2.jsx[1] => using useReducerDispatcher:

import { useReducerDispatcher } from 'react-named-reducer'
import React from 'react'

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

SomeComponentN.jsx[1] => using useReducerState:

import { useReducerState } from 'react-named-reducer'
import React from 'react'

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

This example can be checked on line: live at gmullerb-react-named-reducer demo and the code is at gmullerb-react-named-reducer codesandbox:
Edit gmullerb-react-named-reducer
[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-named-reducer looks to give a quick and easy alternative using hooks to implement Flux with reducers, with typings for Typescript and Flow.

[1] Not the Flux architecture.


Documentation

[1] Keep a Changelog

License

MIT License


Remember

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

Additional words

Don't forget:

  • Love what you do.
  • Learn everyday.
  • Learn yourself.
  • Share your knowledge.
  • Learn from the past, dream on the future, live and enjoy the present to the max!.

At life:

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

At work:

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