react-named-reducer

React Component to easily manage State through reducers using hooks

with typings for Typescript and Flow.

A derivation of react-reducer-context

---

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:

[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

• NamedReducer | useNamedReducer | useReducerState | useReducerDispatcher.

  • Nesting.
  • Typings.
  • Prerequisites.
  • Extras:
    • With Injection.
      • with Flow typings.
      • with Typescript typings.
    • With Actions Creators.
      • with Flow typings.
      • with Typescript typings.
    • Testing.
    • Accessing the Context.
    • Migration from react-reducer-context to react-named-reducer.

• Extending/Developing.

• MIT License.

• CHANGELOG.md: add information of notable changes for each version here, chronologically ordered [1].

[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.