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.