Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0092f11

Browse files
committed
add comments and update readme
1 parent2f5384b commit0092f11

File tree

5 files changed

+172
-87
lines changed

5 files changed

+172
-87
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#[3.0.0](https://github.com/cimdalli/redux-ts/compare/3.0.0...2.6.0) (2018-05-08)
2+
3+
4+
###BREAKING CHANGES
5+
6+
***AsyncAction:** There is no more`AsyncAction`. Instead of passing dispatch through actions, it is passing to reducer body. You can use async dispatch on reducer declaration via`ReducerBuilder`.
7+
8+
***ReducerBuilder.build():** Dont need to build reducer, only passing declaration is enough.

‎README.md‎

Lines changed: 67 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
react-ts
2-
=============
1+
#redux-ts
32

43
Utils to define react redux reducer/action in typescript.
54

6-
[![build status](https://img.shields.io/travis/cimdalli/redux-ts/master.svg?style=flat-square)](https://travis-ci.org/cimdalli/redux-ts)
5+
[![build status](https://img.shields.io/travis/cimdalli/redux-ts/master.svg?style=flat-square)](https://travis-ci.org/cimdalli/redux-ts)
76
[![npm version](https://img.shields.io/npm/v/redux-ts.svg?style=flat-square)](https://www.npmjs.com/package/redux-ts)
87

8+
###FOR v 2.X PLEASE GO TO[THE 2.x BRANCH](https://github.com/ReactiveX/rxjs/tree/2.x)
9+
10+
>For breaking changes you can take look[CHANGELOG](./CHANGELOG.md)
911
1012
```js
1113
npm install--save redux-ts
@@ -15,120 +17,100 @@ npm install --save redux-ts
1517

1618
Create redux store with builder pattern.
1719

18-
```js
20+
```ts
1921
import {StoreBuilder }from'redux-ts'
2022

21-
var store:Redux.Store<StoreState>=newStoreBuilder<StoreState>()
22-
.withInitialState({test:true})
23-
.withReducer("reducer", reducer)
24-
.build();
25-
}
26-
```
27-
28-
>To enable*chrome redux tool*; first declare a const then register within*StoreBuilder*
29-
30-
```js
31-
constdevTool= (f:Redux.StoreCreator)=> {
32-
return ((window as any).__REDUX_DEVTOOLS_EXTENSION__)? (window as any).__REDUX_DEVTOOLS_EXTENSION__: f
23+
const store=newStoreBuilder<StoreState>()
24+
.withInitialState({test:true})
25+
.withReducer("reducer",reducer)
26+
.withDevTools()// enable chrome devtools
27+
.build();
3328
}
34-
35-
var store=newStoreBuilder<StoreState>()
36-
.withEnhancer(devTool)
37-
.build();
3829
```
3930

40-
4131
##Actions
4232

43-
Actions store data that are required on reducers. Declaration of them are succeed by their class name so no need to define type again. Depend on need, action could be either sync or async (like[redux-thunk](https://github.com/gaearon/redux-thunk)).
33+
Actions store data that are required on reducers. Declaration of them are succeed by their`class name` so no need to define type again.
4434

45-
```js
46-
import {SyncAction,AsyncAction }from'redux-ts'
47-
import {push }from'react-router-redux'
35+
>Uglify operation will scramble function names so you need to either configure to keep function names as is ([#1](https://github.com/cimdalli/redux-ts/issues/1)) or specify unique names with`type` property.
4836
37+
```ts
38+
import {SyncAction }from'redux-ts'
4939

50-
exportclassLoginextendsAsyncAction {
51-
constructor(publicusername:string,publicpassword:string) {
52-
super();
53-
}
40+
exportclassLoginextendsSyncAction {
41+
constructor(publicusername:string,publicpassword:string) {
42+
super()
43+
}
5444
}
5545

56-
exportclassLogoutextendsAsyncAction { }
57-
46+
exportclassLogoutextendsSyncAction {
47+
type='Unique Type Name'
48+
}
5849

5950
exportclassSetTokenextendsSyncAction {
60-
constructor(publictoken:string) {
61-
super();
62-
}
63-
getTokenKey() {
64-
return"auth";
65-
}
51+
constructor(publictoken:string) {
52+
super()
53+
}
54+
getTokenKey() {
55+
return'auth'
56+
}
6657
}
6758
```
6859

6960
##Reducers
7061

71-
Unlikeoriginal redux implementation,reducers canconsume both sync and async actions. Each reducer method should return a value even itdoesnt change state. Async operationsare stored on async actions andwill beresolved after original dispatch cycle isfinised.
62+
Reducers are consumers for actions to change application state. Difference fromoriginal redux implementation is in`redux-ts`reducers canalso dispatch another action asynchronously. Each reducer method should return a value even itdoesn't change state. Asyncdispatchoperations will behandled after original dispatch cycle isfinished.
7263

73-
```js
64+
```ts
7465
import {ReducerBuilder }from'redux-ts'
7566
import {Login,Logout,SetToken }from'../actions'
7667
import {push }from'react-router-redux'
7768

78-
7969
exportinterfaceAuthState {
80-
token?:string;
70+
token?:string
8171
}
8272

8373
exportconst authReducer=newReducerBuilder<AuthState>()
84-
.init({})
85-
86-
.handle(Login, (state,action)=> {
87-
88-
action.then(dispatch=> {
89-
fetch(`https://httpbin.org/get?username=${action.username}&password=${action.password}`)
90-
.then(x=>x.json())
91-
.then(data=> {
92-
dispatch(newSetToken(data.args.username+"|"+data.args.password));
93-
dispatch(push("/dashboard"))
94-
});
95-
});
96-
97-
return state;
98-
})
99-
100-
101-
.handle(Logout, (state,action)=> {
102-
103-
action.then(dispatch=> {
104-
dispatch(newSetToken(null));
105-
dispatch(push("/dashboard"));
106-
});
107-
108-
return state;
109-
})
110-
111-
112-
.handle(SetToken, (state,action)=> {
113-
114-
if (action.token!=null) {
115-
localStorage.setItem(action.getTokenKey(),action.token);
116-
}
117-
else {
118-
localStorage.removeItem(action.getTokenKey());
119-
}
120-
121-
returnObject.assign({}, state, {
122-
token:action.token
123-
});
124-
})
125-
74+
.init({})
75+
76+
.handle(Login, (state,action,dispatch)=> {
77+
fetch`https://httpbin.org/get?username=${action.username}&password=${action.password}`)
78+
.then(x=>x.json())
79+
.then(data=> {
80+
dispatch(newSetToken(data.args.username+'|'+data.args.password))
81+
dispatch(push('/dashboard'))
82+
})
83+
84+
returnstate
85+
})
86+
87+
.handle(Logout, (state,action,dispatch)=> {
88+
dispatch(newSetToken(undefined))
89+
dispatch(push('/dashboard'))
90+
91+
returnstate
92+
})
93+
94+
.handle(SetToken, (state,action)=> {
95+
const token=action.token
96+
const key=action.getTokenKey()
97+
98+
if (token) {
99+
localStorage.setItem(key,token)
100+
}else {
101+
localStorage.removeItem(key)
102+
}
126103

127-
.build();
104+
return {
105+
...state,
106+
token,
107+
}
108+
})
128109
```
129110

130111
##Example
131-
[react-material-demo](https://github.com/cimdalli/react-material-demo)
112+
113+
[react-material-demo](https://github.com/cimdalli/react-material-demo) (obsolete)
132114

133115
##License
134116

‎src/action.model.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
import{Action}from'redux'
22

3+
/**
4+
* Abstract action definition. Create a new class and extend from `SyncAction`
5+
*
6+
* Uglify operation scrambles function names with default configuration.
7+
* In order to prevent it, either configure as keeping function names
8+
* or overwrite `type` field.
9+
*
10+
*@export
11+
*@abstract
12+
*@class SyncAction
13+
*@implements {Action<string>}
14+
*/
315
exportabstractclassSyncActionimplementsAction<string>{
416
type:string
517
}

‎src/reducer.builder.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,27 @@ export class ReducerBuilder<State = {}> {
55
privateactions:{[type:string]:ActionBody<State,Action>}={}
66
privateinitState:State
77

8+
/**
9+
* Initial state of the reducer
10+
*
11+
*@param {State} state State object
12+
*@returns
13+
*@memberof ReducerBuilder
14+
*/
815
publicinit(state:State){
916
this.initState=state
1017
returnthis
1118
}
1219

20+
/**
21+
* Consumer definition for given action type
22+
*
23+
*@template T Action type
24+
*@param {ActionClass<T>} type Action object (should be class)
25+
*@param {ActionBody<State, T>} action Action body
26+
*@returns
27+
*@memberof ReducerBuilder
28+
*/
1329
publichandle<TextendsAction>(
1430
type:ActionClass<T>,
1531
action:ActionBody<State,T>,

‎src/store.builder.ts‎

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,65 @@ export class StoreBuilder<StoreType extends { [key: string]: any }> {
4646
this.enhancer=f=>f
4747
}
4848

49-
publicwithMiddleware(middleware:Middleware){
50-
this.middlewares.push(middleware)
49+
/**
50+
* Register given middlewares.
51+
*
52+
* _Execution order will be same as registration order._
53+
*
54+
*@param {Middleware} middleware
55+
*@returns
56+
*@memberof StoreBuilder
57+
*/
58+
publicwithMiddleware(...middleware:Middleware[]){
59+
this.middlewares.push(...middleware)
5160
returnthis
5261
}
5362

63+
/**
64+
* Initial value of store state
65+
*
66+
*@param {DeepPartial<StoreType>} state
67+
*@returns
68+
*@memberof StoreBuilder
69+
*/
5470
publicwithInitialState(state:DeepPartial<StoreType>){
5571
this.initialState=state
5672
returnthis
5773
}
5874

75+
/**
76+
* Register pure redux reducer with given name
77+
*
78+
*@param {string} name Name of the reducer. _(should be same as store field name)_
79+
*@param {Reducer} reducer Reducer instance
80+
*@returns
81+
*@memberof StoreBuilder
82+
*/
5983
publicwithReducer(name:string,reducer:Reducer){
6084
this.reducers[name]=reducer
6185
returnthis
6286
}
6387

88+
/**
89+
* Register *ReducerBuilder* instance
90+
*
91+
*@param {string} name Name of the reducer. _(should be same as store field name)_
92+
*@param {ReducerBuilder} reducerBuilder ReducerBuilder instance
93+
*@returns
94+
*@memberof StoreBuilder
95+
*/
6496
publicwithReducerBuilder(name:string,reducerBuilder:ReducerBuilder){
6597
this.reducerBuilders[name]=reducerBuilder
6698
returnthis
6799
}
68100

101+
/**
102+
* Register list of pure reducer functions with given name
103+
*
104+
*@param {ReducersMapObject} reducers List of reducers
105+
*@returns
106+
*@memberof StoreBuilder
107+
*/
69108
publicwithReducersMap(reducers:ReducersMapObject){
70109
this.reducers={
71110
...(this.reducersasany),
@@ -74,6 +113,13 @@ export class StoreBuilder<StoreType extends { [key: string]: any }> {
74113
returnthis
75114
}
76115

116+
/**
117+
* Register list of ReducerBuilder objects with given name
118+
*
119+
*@param {ReducerBuilderMap} reducerBuilders List of ReducerBuilder objects
120+
*@returns
121+
*@memberof StoreBuilder
122+
*/
77123
publicwithReducerBuildersMap(reducerBuilders:ReducerBuilderMap){
78124
this.reducerBuilders={
79125
...this.reducerBuilders,
@@ -82,17 +128,38 @@ export class StoreBuilder<StoreType extends { [key: string]: any }> {
82128
returnthis
83129
}
84130

131+
/**
132+
* Register given enhancer
133+
*
134+
* _Execution order will be same as registration order._
135+
*
136+
*@param {StoreEnhancer} enhancer
137+
*@returns
138+
*@memberof StoreBuilder
139+
*/
85140
publicwithEnhancer(enhancer:StoreEnhancer){
86141
constpreEnhancer=this.enhancer
87142
this.enhancer=f=>enhancer(preEnhancer(f))
88143
returnthis
89144
}
90145

146+
/**
147+
* Enable chrome devtools
148+
*
149+
*@returns
150+
*@memberof StoreBuilder
151+
*/
91152
publicwithDevTools(){
92153
this.withEnhancer(devTool)
93154
returnthis
94155
}
95156

157+
/**
158+
* Build an instance of store with configured values.
159+
*
160+
*@returns {Store<StoreType>}
161+
*@memberof StoreBuilder
162+
*/
96163
publicbuild():Store<StoreType>{
97164
constdefer=Promise.defer<Dispatch<SyncAction>>()
98165
constreducerMap=Object.keys(this.reducerBuilders).reduce(

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp