Provides a React hook similar to the Redux Toolkit createSlice.
npm install @welingtonms/use-slice
Provides a React hook similar to the Redux Toolkit createSlice.
Whenever you intend to use React's useReducer hook, useSlice can be a big help; it wires the whole reducers/actions parts for you out of the box so you can focus on the business logic of your app.
The idea is that you are able to create your reducers and actions to be used with React's useReducer.
You can add this hook as a dependency by running npm install @welingtonms/use-slice or yarn add @welingtonms/use-slice.
Name of your slice. This is used to internally compose your actions' names (use this is case you want to dispatch your actions manually).
Initial state for your slice.
Finally, here you provide your reducers. Here we expect an object with your reducer functions. Each reducer function receives as parameters (as any reducer would), the current state and the action object. Important to notice that we handle the payload to you as an array, containing the arguments provided when your action was called (so your action can use as many parameter as needed).
When you call useSlice we generate a wrapper around your reducers, generating actions types and using React's useReducer to produce your "slice" of state, and return the following:
- state - This is state that's being handled in your slice.
- actions - This object holds your dispatchable actions ([!] do NOT forget to dispatch your action call), generated from the reducers you provided. That means, if your reducers object has a reducer increment, for instance, your actions object will have a function with the same name, so you can call it to perform the intended operation on your state.
- dispatch - The dispatcher function.
Check a more complete example here.
``jsx
import React from 'react';
import { useSlice } from '@welingtonms/use-slice';
function ToDoWithSlice() {
const [ description, setDescription ] = React.useState( '' );
const {
state: toDos,
actions,
dispatch,
} = useSlice( 'todo', [], {
addTodo( state, action ) {
const { payload } = action;
const [ newTodo ] = payload;
return [ ...state, newTodo ];
},
setDone( state, action ) {
const { payload } = action;
const [ index ] = payload;
return [
...state.slice( 0, index ),
{
...state[ index ],
done: true,
},
...state.slice( index + 1 ),
];
},
} );
return (
}
>
{ toDo.description }
disabled={ toDo.done }
className="bg-green-500 px-4 py-2 text-white ml-auto mr-0"
onClick={ function addTodo() {
dispatch( actions.setDone( index ) );
setDescription( '' );
} }
>
Done
);
} ) }
export default function App() {
return (