React-Context-Reducer

Lightweight – no dependencies – React wrapper of a Reducer in a Context.

Features:

• It's just react wrapper

This package is currently served as-is. With usage of all ES6 features without any bundling and/or specific whatever the system is used.

Install

• npm i @kifs-react/context-reducer

Usage

npm i react-rest-api

// ################################
//
// App.js
//
// ################################


import { ReducerProvider, } from '@kifs-react/context-reducer'

import { Component } from './Component'

export function App() {
  function reducer(state, action) {
    switch (action.type) {
      case 'doABarrelRoll':
        return { ...state, status: 'doing a barrel roll' }
      default:
        return state
    }
  }

  const initialState = { status: '' }

  function initializer(initialState) {
    return {
      ...initialState
    }
  }

  return (
    <ReducerProvider
      // Optionnal (But recommended that's the goal of this repo): default to dummy reducer `function (state) { return state }`
      reducer={reducer}
      // Optionnal: default to undefined
      initialState={initialState}
      // Optionnal: default to undefined
      initializer={initializer} 
    >
      <Component />
    </ReducerProvider>
  )
}


// ################################
//
// Component.js
//
// ################################


import { useReducerProvider } from '@kifs-react/context-reducer'

export function Component() {
  const [appState, appDispatch] = useReducerProvider()

  return (
    <>
      <button onClick={() => appDispatch({ type: 'doABarrelRoll' })}>Do a Barrel Roll</button>
      {JSON.stringify(appState, null, 2)}
    </>
  )
}