react-use-slice
A react hook to use reducers with an API like createSlice from Redux toolkit, in a typesafe way, with performance in mind.
Install
npm install react-use-sliceExample
JavaScript
import { createContext } from 'react';
import useSlice from 'react-use-slice';
const initialState = {
score: 0
};
const scoreSlice = {
name: 'score', // "name" is optional. It is used in dev tools
initialState,
reducers: {
increment(state, payload) {
const score = state.score + 1;
return { ...state, score };
},
decrement(state, payload) {
const score = state.score - 1;
return { ...state, score };
}
}
};
export const ScoreContext = createContext(null);
export const ScoreProvider = ({ children }) => {
// Actions will be automaticaly dispatched
const [state, actions] = useSlice(scoreSlice);
return (
<ScoreContext.Provider value={{ ...state, ...actions }}>
{children}
</ScoreContext.Provider>
);
};TypeScript
import { createContext } from 'react';
import useSlice, { createSlice, CombineStateAndActions } from 'react-use-slice';
const initialState = {
score: 0
};
const scoreSlice = createSlice({
name: 'score', // "name" is optional. It is used in dev tools
initialState,
reducers: {
increment(state, payload: number) {
const score = state.score + 1;
return { ...state, score };
},
decrement(state, payload: number) {
const score = state.score - 1;
return { ...state, score };
}
}
});
export const ScoreContext =
createContext<CombineStateAndActions<typeof scoreSlice> | null>(null);
export const ScoreProvider = ({ children }) => {
// Actions will be automaticaly dispatched
const [state, actions] = useSlice(scoreSlice);
return (
<ScoreContext.Provider value={{ ...state, ...actions }}>
{children}
</ScoreContext.Provider>
);
};