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

``js
npm i react-slice
`

The basics

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

`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) 🏴‍☠️

`js
// 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 (



);
}
`

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'