react-context-toolkit

Toolkit for React Context API - heavily inspired by @reduxjs/toolkit and react-redux. Written in TypeScript.

• It uses the React Context API instead of Redux for managing state under the hood.
• Depends on use-context-selector to prevent unneccesary rerenders. (https://github.com/reactjs/rfcs/pull/119)

Motivation

I really like the combination of react-redux and @reduxjs/toolkit. React-Redux won't work for me due to this issue:

• https://github.com/visgl/deck.gl/issues/4550

The context API in React doesn't suffer from the same problem, so I decided to make this feel more like I'm using Redux.

API

createStore([...slices]):

const {
  StateProvider,
  useSelector,
  useDispatch,
  Store,
  initialState,
  rootReducer,
} = createStore([
  slice1,
  slice2,
  // ...
])

| returned object | description | | ---------------------------- | ----------------------------------------------------------------------------------------------------- | | StateProvider | The context provider (React Element) that provides the store to all its children | | useSelector(selector) | Hook that selects from the global store (and only rerenders if the selected state has changed) | | useDispatch() | Hook that returns a dispatch function, just like the one in React-Redux | | Store | In case you need direct access to the React Context object | | initialState | The complete initial state. The slice names are keys, under which each slice has its own initialState | | rootReducer(state, action) | The reducer that takes in the combined state, an action, and produces a new combined state |

createSlice(): This is exported directly from @reduxjs/toolkit. API DOCS HERE

Getting Started

Installation

# Using npm
npm install --save react-context-toolkit

# using yarn
yarn add react-context-toolkit

Example

Also, check out the test folder for another example.

Wrapping the application in a provider

// ./src/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { StateProvider } from './app/store'

// Wrap your app in the state provider like this:
ReactDOM.render(
  <React.StrictMode>
    <StateProvider>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

The App component

Notice that it doesn't need to know anything about the store

// src/App.tsx

import React from 'react'
import Component1 from '../features/component1/Component1'
import Component2 from '../features/component2/Component2'
import Component3 from '../features/component3/Component3'

// Note that the App component doesn't need to know anything about the store!
export default function App () {
  return (
    <>
      <Component1 />
      <Component2 />
      <Component3 />
    </>
  )
}

Creating the store

// src/app/store.ts

import { createStore } from 'react-context-toolkit'
import componentSlice1 from '../features/component1/componentSlice1'
import componentSlice2 from '../features/component2/componentSlice2'
import componentSlice3 from '../features/component3/componentSlice3'

export const {
  useSelector,
  useDispatch,
  StateProvider,
  initialState,
} = createStore([componentSlice1, componentSlice2, componentSlice3])

// In case you need direct access to the type of the combined state
export type RootState = typeof initialState

Creating a slice (similar to how it is done in @reduxjs/toolkit)

// src/features/component1/componentSlice1.ts

import { createSlice, PayloadAction } from 'react-context-toolkit'
// ^ You can also import these from '@reduxjs/toolkit'
import { RootState } from '../../app/store'

const slice = createSlice({
  // This name becomes the key in the global state
  name: 'component1',
  initialState: {
    value: 1,
  },
  reducers: {
    // uses immer reducers to allow mutations on an intermediate draft state
    increment (state) {
      state.value++
    },
    incrementBy (state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})
export const { increment, incrementBy } = slice.actions
export const selectValue = (state: RootState) => state[slice.name].value

How state can be used and updated from a component

// src/features/component1/Component1.tsx

import React from 'react'
import { useSelector, useDispatch } from '../../app/store'
import { increment, incrementBy, selectValue } from './componentSlice1'

export default function Component1 () {
  const value = useSelector(selectValue)
  const dispatch = useDispatch()
  return (
    <button onClick={() => dispatch(increment())}>
      I have been clicked {value} times!
    </button>
  )
}

For more examples, see the test folder on GitHub

Roadmap

• Ability to add your own middleware/docs
• Redux-thunk support/docs
• Redux-saga support/docs
• Persistence support/docs (using localStorage) -> requiring serializable state
• Reselect support/docs (for computationally intensive selects)