Single dependency (react) global state. Simplicity 👌 meets performance 🔥
npm install react-sliceA 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 💪
I've made a few Codesandboxes to play around with react-slice
- Javascript sandbox
- Typescript sandbox
``js`
npm i react-slice
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'