React Component to easily manage State through reducers using hooks. with typings for Typescript and Flow. A derivation of https://www.npmjs.com/package/react-reducer-context
MIT License
This project is licensed under the terms of the MIT license.
1 . Add dependency:
package.json
:
..
"dependencies": {
"react": "^16.8.0"
"react-named-reducer": "2.0.1",
..
2 . Create the NamedReducer
component to manage state:
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.
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.
NamedReducer
| useNamedReducer
| useReducerState
| useReducerDispatcher
.
CHANGELOG.md
: add information of notable changes for each version here, chronologically ordered [1].
[1] Keep a Changelog
Don't forget:
At life:
At work: