Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frontainer/fluent-reducer
TypeSafe & Immutable useReducer
https://github.com/frontainer/fluent-reducer
immutable react reducer typescript
Last synced: 5 days ago
JSON representation
TypeSafe & Immutable useReducer
- Host: GitHub
- URL: https://github.com/frontainer/fluent-reducer
- Owner: frontainer
- Created: 2020-05-31T06:43:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:34:46.000Z (about 2 years ago)
- Last Synced: 2025-01-31T12:49:55.752Z (10 days ago)
- Topics: immutable, react, reducer, typescript
- Language: TypeScript
- Homepage: https://sable-virt.github.io/fluent-reducer/
- Size: 3.21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fluent-reducer
Easy & TypeSafe & Immutable reducer(No Redux Dependency)
## How to use
```
npm i -S fluent-reducer immer
```
### [optional] Install your framework
example for react
```
npm i -S react
```
## Example
- [React](https://github.com/sable-virt/fluent-reducer-examples/tree/master/react-example)
- [Vue](https://github.com/sable-virt/fluent-reducer-examples/tree/master/vue-example)
- [Angular](https://github.com/sable-virt/fluent-reducer-examples/tree/master/angular-example)
### 1. Define State Object
```
export interface IRootState {
name: string
}
const RootState: IRootState = {
name: 'unknown'
}
```
### 2. Create FluentReducer
```
// 'root' is unique ID
import { ReactFluentReduer } from 'fluent-reducer/react'
// for not react app
// import { FluentReduer } from 'fluent-reducer'
export const rootReducer = new ReactFluentReducer<'root', IRootState>(RootState, {
verbose: true,
middlewares: [(state, action) => {
// this state can edit. not plane object, so if you save state like localstorage, use subscribe
console.log(state, action)
}]
})
```
### 3. Sync Action
```
export const changeName = rootReducer.sync('CHANGE_NAME', (state, name) => {
state.name = name
})
```
### 4. Async Action
```
const asyncChangeState = reducer.async('ASYNC_CHANGE_NAME', (name, dispatch, getState) => {
return new Promise(resolve => {
setTimeout(() => {
resolve(name)
}, 3000)
})
}, {
// before promise action
started(state, params) {
console.log('started', params)
state.state = 'started'
},
// promise rejected action
failed(state, { error }) {
console.error(error)
},
// promise resolved action
done(state, { result }) {
state.name = result
console.log('done')
}
})
```
### 5. react hooks
```
export const MyExample: React.FC = () => {
const [state, dispatch] = rootReducer.useFluentReducer()
const _handleOnClick = useCallback(() => {
// execute changeName action
dispatch(changeName(Date.now().toString()))
}, [dispatch])
return (
{state.name}
)
}
```
### 6. subscribe/unsubscribe
```
rootReducer.subscribe((state, action) => {
// this state is readonly. if you want to update state, use middlewares option.
console.log(state, action)
})
```