use-full-reducer

Wrap useReducer hook to manage actions and selectors

Install

npm install --save use-full-reducer

Usage

useFullReducer

import useFullReducer from 'use-full-reducer'

const [reducerValue, actions, selectors] = useFullReducer(
  reducerName,
  [myAction],
  [mySelector],
  initialReducerValue,
  initialReducerFunc
)

Example :

import useFullReducer from 'use-full-reducer'
import { setFormAction, setValueAction } from '../actions/form'
import { selectFormData } from '../selectors/form'

const defaultValue = {};
const initValue = (value) => {...value, /* some changes */};
const [
  form,
  [setForm, setValue],
  [getFormData]
] = useFullReducer(
  formReducer,
  [setFormAction, setValueAction],
  [selectFormData],
  defaultValue,
  initValue
)

useActions

import { useActions } from 'use-full-reducer'

// dispatch can come from useDispatch or useReducer hooks
const actions = useActions(dispatch, [myAction])

Example :

import { useDispatch } from 'react-redux'
import { useActions } from 'use-full-reducer'
import { setObjectAction, setValueAction } from '../actions'

const dispatch = useDispatch()
const [setObject, setValue] = useActions(dispatch, [
  setObjectAction,
  setValueAction
])

useSelectors

import { useSelectors } from 'use-full-reducer'

// reducerValue can come from useReducer or useSelector hooks
const selector = useSelectors(reducerValue, [mySelector])

Example :

import { useSelectors } from 'use-full-reducer'
import { count } from '../selectors'

const [state, dispatch] = useReducer(reducer, initialState)
const [countValues] = useSelectors(state, [count])

usePrevious

import { usePrevious } from 'use-full-reducer'

const prevEntity = usePrevious(entity)

useEffect(() => {
  if (prevEntity.id) {
    // change of entity
  } else {
    // entity has been set from void
  }
}, [entity.id])

License

MIT © GeoDaz