Simple-context-react NPM

Simple Context React ✈

Util for Easy Use of the `React Context API`

Installation

yarn add simple-context-react
# or
npm i simple-context-react

Usage

// context/index.js
import createSimpleContext, { unpackModule } from 'simple-context-react'

import * as setters from './setters'
import * as getters from './getters'
import * as actions from './actions'

const store = {
  state: {
    todos: [],
    status: 'idle',
    filter: 'all',
    message: {}
  },
  setters: unpackModule(setters),
  getters: unpackModule(getters),
  actions: unpackModule(actions)
}

export const [SimpleProvider, useSimpleContext] = createSimpleContext(store)

// index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'
import { SimpleProvider } from './context'

render(
  <React.StrictMode>
    <SimpleProvider>
      <App />
    </SimpleProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

// components/SomeComponent.js
import { useSimpleContext } from '../context'

export const SomeComponents = () => {
  const { simpleState, setSimpleState,  setters, getters, actions } = useSimpleContext()

  // ...
}

Full example on CodeSandbox.

Signatures

Setters

Intended to synchronous state modification.

With state and args

setSomething: (state, args) => {
  const newState = ...

  return {
    stateKey: newState
  }
}
// stateKey === state[someKey]

// or another form
setSomething(state, args) {
  const newState = ...

  return {
    stateKey: newState
  }
}

// example
addTodo: ({ todos }, newTodo) => ({ todos: todos.concat(newTodo) })

Without state

setSomething: (_, args) => {
  const newState = ...

  return {
    stateKey: newState
  }
}

// example
setTodos: (_, newTodos) => ({ todos: newTodos })

When arg === stateKey

setSomething(_, arg) => ({ arg })

// example
setStatus(_, status) => ({ status })

Actions

Intended to asynchronous state modification.

async fetchSomething(setters, args) {
  const someData = await (await fetch(SERVER_URL)).json()

  setters.setSomething(someData)
}

// example
async fetchTodos({ setStatus, setTodos, setMessage }) {
  setStatus('loading')

  try {
    const { data } = await axios(SERVER_URL)
    setTodos(data)
    setMessage({
      type: 'success',
      text: 'Todos has been successfully fetched'
    })
  } catch (err) {
    console.error(err)
    setMessage({
      type: 'error',
      text: 'Something went wrong. Try again later'
    })
  } finally {
    setStatus('idle')
    // defer
    await sleep(1000)
    setMessage({})
  }
}

Getters

Intended to extract part of the state or calculate derived data.

getSomething: ({ stateSlice1, stateSlice2, ...stateSliceN, getters }) => stateSlice | derivedData

// example
getFilteredTodos: ({ todos, getters }) => {
  const filter = getters.getFilter()

  if (filter === 'all') return todos

  return filter === 'active'
    ? getters.getActiveTodos()
    : getters.getCompletedTodos()
}