Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maicolsantos/typeactionsredux
We know that using Redux can be a bit verbose, with TypeActionsRedux you in addition to writing little, keep their types and actions organized.
https://github.com/maicolsantos/typeactionsredux
actions react redux type
Last synced: about 1 month ago
JSON representation
We know that using Redux can be a bit verbose, with TypeActionsRedux you in addition to writing little, keep their types and actions organized.
- Host: GitHub
- URL: https://github.com/maicolsantos/typeactionsredux
- Owner: maicolsantos
- Created: 2020-07-08T17:51:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T11:29:58.000Z (about 2 years ago)
- Last Synced: 2024-11-10T13:42:35.811Z (about 2 months ago)
- Topics: actions, react, redux, type
- Language: JavaScript
- Homepage: https://npm.im/type-actions-redux
- Size: 975 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeActionsRedux
```
yarn add type-actions-redux
```
We know that using Redux can be a bit verbose, with TypeActionsRedux you
in addition to writing little, keep their types and actions organized.
### How we do it when we use redux
First we create a file that contains the types.
```js
// types.js
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
```
Then we create another file that contains our actions.
```js
// actions.js
import * as types from './types'
export function increment() {
return {
type: types.INCREMENT,
}
}
export function decrement() {
return {
type: types.DECREMENT,
}
}
```
### Using TypeActionsRedux
With TypeActionsRedux you create an object that has the objective of creating a
type constant and one-time action function.
That way you abstract the verbosity of writing two files
```js
import { typeActionsRedux } from 'type-actions-redux'
const { actions, types } = typeActionsRedux('scope', {
increment: () => ({}),
decrement: () => ({}),
})
```
### Create actions with parameters
```js
import { typeActionsRedux } from 'type-actions-redux'
const { actions, types } = typeActionsRedux('user', {
getUserData: (id) => ({ meta: { id } }),
setUserData: (data) => ({ payload: { data } }),
})
```
### Output TypeActionsRedux
What typeActionsRedux does is to export two objects, `types` and` actions`.
```js
// Output typeActionsRedux
export const types = {
GET_USER_DATA = 'user/GET_USER_DATA'
SET_USER_DATA = 'user/SET_USER_DATA'
}
export const actions = {
getUserData(id) {
return {
type: types.GET_USER_DATA,
meta: { id },
}
},
setUserData(data) {
return {
type: types.SET_USER_DATA,
payload: { data },
}
},
}
```
### Example using redux-saga
Remember that the name of the function in typeActionsRedux will be the same name used in `types` and` actions`,
being that in `types` he receives modifications to be uppercase and underline in cases of camelCase.
So when using a `type` in the saga for example, just use it like this
```js
import { takeLatest } from 'redux-saga/effects'
import { types } from './actions'
function* getUserDataSaga({ meta: { id }}) {
...
}
export default function* () {
yield takeLatest(
types.GET_USER_DATA,
getUserDataSaga,
)
}
```
### How to use in the project
```jsx
import React from 'react'
import { useDispatch } from 'react-redux'
import { actions } from './actions'
const App = () => {
const dispatch = useDispatch()
const handleClick = () => {
const id = 1
dispatch(actions.getUserData(id))
}
return (
Press me
)
}
```