react-slice

React Slice

A simple performant approach to state management in React.

1. Uses reducers and dispatch
2. Access state from anywhere with hooks
3. You can still use statically
4. Optimized for use with Typescript
5. Full control of render performance
6. 2kb minified

Demo

I've made a few Codesandboxes to play around with react-slice

• Javascript sandbox
• Typescript sandbox

Installation

npm i react-slice

The basics

Create a file and export your hook w/ reducer (fx counterSlice.js)

// counterSlice.js
import { createSlice } from 'react-slice'; // 👈👈👈

export default createSlice({
  reducer: /*👈👈👈*/ (state, action) => {
    switch (action.type) {
      case 'increment':
        return state + 1;
      default:
        return state;
    }
  },
  initialState: /*👈👈👈*/ 0,
  debugName: 'Counter', // Optional.
});

Then import that file somewhere else (fx App.jsx)

// App.jsx
import React from 'react';
import counterSlice from './counterSlice'; // 👈👈👈

export default function App(test) {
  const counterState = counterSlice.use(); // 👈👈👈

  const onClick = () => {
    counterSlice.dispatch({ type: 'increment' }); // 👈👈👈
  };
  return (
    <div className="App">
      <h1>{counter /*👈👈👈*/}</h1>
      <button onClick={onClick}>Increment</button>
    </div>
  );
}

And boom! That's all you need to get up and running!

Advanced/FAQ

• API for createSlice()
• Avoid unnecessary re-renders
• Use statically from utils etc.
• Use Typescript and get strongly typed state and actions
• Use with Server-side rendering (coming soon, would love ideas/usecases)
• Debugging is disabled when process.env is 'production' or 'test'