https://github.com/welingtonms/use-slice
Provides a React hook similar to the Redux Toolkit createSlice.
https://github.com/welingtonms/use-slice
dispatch react react-hooks reducers redux
Last synced: 7 months ago
JSON representation
Provides a React hook similar to the Redux Toolkit createSlice.
- Host: GitHub
- URL: https://github.com/welingtonms/use-slice
- Owner: welingtonms
- License: mit
- Created: 2020-09-07T01:58:11.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T13:26:30.000Z (over 2 years ago)
- Last Synced: 2024-12-22T21:04:48.083Z (10 months ago)
- Topics: dispatch, react, react-hooks, reducers, redux
- Language: JavaScript
- Homepage:
- Size: 860 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# use-slice
[](https://coveralls.io/github/welingtonms/use-slice)
[](https://www.npmjs.com/package/@welingtonms/use-slice)
Provides a React hook similar to the Redux Toolkit [createSlice](https://redux-toolkit.js.org/usage/usage-with-typescript#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](https://reactjs.org/docs/hooks-reference.html#usereducer).
## Instalation
You can add this hook as a dependency by running `npm install @welingtonms/use-slice` or `yarn add @welingtonms/use-slice`.
## Props
### - `name`
Name of your slice. This is used to internally compose your actions' names (use this is case you want to dispatch your actions manually).
### - `initialState`
Initial state for your slice.
### - `reducers`
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).
## What you get
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.
## Usage guide
Check a more complete example [here](https://codesandbox.io/embed/relaxed-fast-h4lv4?fontsize=14&hidenavigation=1&theme=dark).
```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 (
ToDoWithSlice
Description
Add
{ toDos.map( ( toDo, index ) => {
return (
-
{ toDo.description }
Done
);
} ) }
);
}
export default function App() {
return (
How to use @welingtonms/use-slice
);
}
```