https://github.com/leandrofernandez94/react-reducer-code-generator
https://github.com/leandrofernandez94/react-reducer-code-generator
actions javascript react reducer state state-management usereducer
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/leandrofernandez94/react-reducer-code-generator
- Owner: leandroFernandez94
- Created: 2021-09-09T21:19:53.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-14T21:28:04.000Z (almost 5 years ago)
- Last Synced: 2025-02-22T22:06:23.741Z (over 1 year ago)
- Topics: actions, javascript, react, reducer, state, state-management, usereducer
- Language: JavaScript
- Homepage:
- Size: 258 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Reducer Code Generator
#### Avoid writing actions and a long switch reducer in your React application just by providing your initial state object.
##### code example https://codesandbox.io/s/react-reducer-code-generator-example-9qjzh
```javascript
import ReactReducerCodeGenerator from 'react-reducer-code-generator'
const initialState = {
prop1: true,
anotherProp: 50,
objectProp: {
deepProp: "Lorem ipsum",
prop2: [false, true],
},
lastProp: "last one",
}
const {actions, reducer} = ReactReducerCodeGenerator(initialState)
```
this will provide you with an actions array with the shape of:
```javascript
[
'SET_PROP1',
'SET_ANOTHER_PROP',
'SET_OBJECT_PROP',
'SET_OBJECT_PROP__DEEP_PROP',
'SET_OBJECT_PROP__PROP2',
'SET_LAST_PROP'
]
```
that way we can apply actions in a react context like this:
```javascript
import React, {useReducer} from 'react'
import ReactReducerCodeGenerator from 'react-reducer-code-generator'
const initialState = {
prop1: true,
anotherProp: 50,
objectProp: {
deepProp: "Lorem ipsum",
prop2: [false, true],
},
lastProp: "last one",
}
const {actions, reducer} = ReactReducerCodeGenerator(initialState)
export default function MyStatefulComponent() {
const [state, dispatch] = useReducer(reducer, initialState)
function handleChangeProp1() {
// SET_PROP1 is provided in the "actions" array
dispatch({
type: "SET_PROP1",
payload: !state.prop1
});
}
function handleChangeObject() {
// you can modify objects properties
dispatch({
type: "SET_OBJECT_PROP",
payload: {
deepProp: "dolor sit amet",
prop2: [true, false]
}
});
}
function handleChangeDeepProp() {
// you can set deep properties and modify only their value
//we always use the syntax SET_____...
dispatch({
type: "SET_OBJECT_PROP__DEEP_PROP",
payload: "only modify me!"
});
}
function handleWithCustomReducer() {
// you can also provide a reducerHandler property in the dispatch object
// this function will receive the current property value and the payload value provided in the
// action
// in this example instead of setting the payload value, we add it to the current value:
dispatch({
type: "SET_ANOTHER_PROP",
payload: 2,
reducerHandler: (currentValue, payload) => {
return currentValue + payload;
}
});
}
return (
ReactReducerCodeGenerator CodeSandbox
actions generated:
{actions.toString()}
Modify prop1!
Modify objectProp!
Modify deepProp!
current state
{JSON.stringify(state, null, 2)}
);
}
```