Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dancespiele/spiel-redux
https://github.com/dancespiele/spiel-redux
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dancespiele/spiel-redux
- Owner: dancespiele
- Created: 2017-12-05T10:53:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-19T20:51:21.000Z (almost 7 years ago)
- Last Synced: 2024-10-10T05:35:22.463Z (28 days ago)
- Language: TypeScript
- Size: 29.3 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pyrite Redux
## Redux decoration
### Arguments
reducers: type ReducersMapObject (Required)
middlewares: type Array[Middleware] (Optional - No compatible with compose arg)
composeFuncitions: type Array[Function] (Optional- no compatible with middleware arg)
**WARNING**: If you write the middleware and compose arguments the compose will be ignored. If you want to pass compose it has to look like this.
```typescript
@Template(ExampleTemplate)
@Redux(reducers, null, composeFunctions)
export class ExampleController extends Component {
}
```
## About Redux
Read more [here](https://redux.js.org/docs/introduction/)
## How use it
### HTML code:
```jsx
It show the time with this {this.delay} when the button is clicked
this.store.dispatch(this.getTime(this.delay) as any)}> Click
{(this.time || this.frozen) ?
Time: {this.time ? this.time.toString(): ''}
Frozen: {this.frozen.toString()}
:
It isn't running yet
}
```
### Typescript code:
#### Reducers:
```typescript
const timeState = {};
export const reducers = {
time: function (state = timeState, action: any) {
switch (action.type) {
case 'GET_TIME_REQUEST':
return {
...state,
frozen: true
}
case 'GET_TIME_SUCCESS':
return {
...state,
time: action.result.time,
frozen: false
}
case 'GET_TIME_FAILURE':
// we could add an error message here, to be printed somewhere in our application
return {
...state,
frozen: false
}
default:
return state
}
}
}
```
#### Actions:
```typescript
export function getTime(delay: number) {
return {
types: ['GET_TIME_REQUEST', 'GET_TIME_SUCCESS', 'GET_TIME_FAILURE'],
promise: () => {
return new Promise((resolve, reject) => {
// Just simulating an async request to a server via a setTimeout
setTimeout(() => {
const d = new Date();
const ms = ('000' + d.getMilliseconds()).slice(-3)
resolve({
time: `${d.toString().match(/d{2}:d{2}:d{2}/)[0]}.${ms}`
})
}, delay)
})
}
}
}
```
#### Middlewares:
```typescript
function timeMiddleware() {
return (next: any) => (action: any) => {
const { promise, types, ...rest } = action
if (!promise) {
return next(action)
}
const [REQUEST, SUCCESS, FAILURE] = types
next({...rest, type: REQUEST})
return promise().then(
(result: any) => {
next({...rest, result, type: SUCCESS})
},
(error: any) => {
next({...rest, error, type: FAILURE})
}
)
}
}
export const middlewares = [timeMiddleware];
```
#### Controler:
```typescript
import {Component, Template, m} from 'pyrite';
import {Redux, Store} from '../../src/index';
import {ExampleTemplate} from './ExampleTemplate';
import {reducers, middlewares, getTime} from './helpers'
@Template(ExampleTemplate)
@Redux(reducers, middlewares)
export class ExampleController extends Component {
delay: number = 500;
time: string;
frozen: boolean= false;
store: Store<{}>
getTime = getTime;
$onCreate() {
this.store.subscribe(()=>{
const state: any = this.store.getState();
if(state.time) this.time = state.time.time;
this.frozen = state.time.frozen;
m.redraw();
})
}
}
```