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

Commitdc24a63

Browse files
committed
fsa compliant implementation
1 parent4727bc0 commitdc24a63

16 files changed

+209
-174
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
#[3.0.0](https://github.com/cimdalli/redux-ts/compare/3.0.0...2.6.0) (2018-05-08)
1+
#[4.0.0](https://github.com/cimdalli/redux-ts/compare/4.0.0...3.0.0) (2018-05-12)
2+
3+
###BREAKING CHANGES
4+
5+
***Actions:** The way creating and registering action has been changed. Instead of declaring action as class, you can create them via`createAction` function. (It is changed since modifying uglify settings for a library does not make sense and it is more compatible with FSA standards.)
26

7+
###Features
8+
9+
***mapDispatchToProps:** This new method can be used for mapping actions to props in easy way. You can find the usage in readme.
10+
11+
#[3.0.0](https://github.com/cimdalli/redux-ts/compare/3.0.0...2.6.0) (2018-05-08)
312

413
###BREAKING CHANGES
514

615
***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`.
716

8-
***ReducerBuilder.build():** Dont need to build reducer, only passing declaration is enough.
17+
***ReducerBuilder.build():** Dont need to build reducer, only passing declaration is enough.

‎README.md‎

Lines changed: 69 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
#redux-ts
22

3-
Utils to define react redux reducer/action in typescript.
3+
Utils to define react redux reducer/action in typescript.</p>
44

55
[![build status](https://img.shields.io/travis/cimdalli/redux-ts/master.svg?style=flat-square)](https://travis-ci.org/cimdalli/redux-ts)
6+
[![dependencies Status](https://david-dm.org/cimdalli/redux-ts/status.svg?style=flat-square)](https://www.npmjs.com/package/redux-ts)
7+
[![devDependencies Status](https://david-dm.org/cimdalli/redux-ts/dev-status.svg?style=flat-square)](https://david-dm.org/cimdalli/redux-ts?type=dev)
68
[![npm version](https://img.shields.io/npm/v/redux-ts.svg?style=flat-square)](https://www.npmjs.com/package/redux-ts)
79

8-
###FOR v 2.X PLEASE GO TO[THE 2.x BRANCH](https://github.com/cimdalli/redux-ts/tree/2.x)
10+
<h5align="right"> Now FSA compliant</h5>
911

1012
>For breaking changes you can take look[CHANGELOG](./CHANGELOG.md)
1113
@@ -30,62 +32,65 @@ const store = new StoreBuilder<StoreState>()
3032

3133
##Actions
3234

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.
34-
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.
35+
Action declaration can be done with`'createAction'` function which takes action`type` as parameter.
3636

3737
```ts
38-
import {SyncAction }from'redux-ts'
38+
import {createAction }from'redux-ts'
3939

40-
exportclassLoginextendsSyncAction {
41-
constructor(publicusername:string,publicpassword:string) {
42-
super()
43-
}
40+
interfaceLoginPayload {
41+
username:string
42+
password:string
4443
}
4544

46-
exportclassLogoutextendsSyncAction {
47-
type='Unique Type Name'
45+
interfaceSetTokenPayload {
46+
token?:string
4847
}
4948

50-
exportclassSetTokenextendsSyncAction {
51-
constructor(publictoken:string) {
52-
super()
53-
}
54-
getTokenKey() {
55-
return'auth'
56-
}
57-
}
49+
exportconst Login=createAction<LoginPayload>('Login')
50+
51+
exportconst Logout=createAction('Logout')
52+
53+
exportconst SetToken=createAction<SetTokenPayload>('SetToken')
5854
```
5955

6056
##Reducers
6157

62-
Reducers are consumers for actions to change application state. Difference from original redux implementation is in`redux-ts` reducers can also dispatch another action asynchronously. Each reducer method should returna value even it doesn't changestate. Async dispatch operations will be handled after original dispatch cycle is finished.
58+
Reducers are consumers for actions to change application state. Difference from original redux implementation is in`redux-ts` reducers can also dispatch another action asynchronously. Each reducer method should returnstate value even it doesn't changeit. Async dispatch operations will be handled after original dispatch cycle is finished.
6359

6460
```ts
6561
import {ReducerBuilder }from'redux-ts'
6662
import {Login,Logout,SetToken }from'../actions'
6763
import {push }from'react-router-redux'
6864

65+
const tokenKey='auth'
66+
6967
exportinterfaceAuthState {
7068
token?:string
7169
}
7270

7371
exportconst authReducer=newReducerBuilder<AuthState>()
74-
.init({})
72+
.init({
73+
token:localStorage.getItem(tokenKey)||undefined,
74+
})
7575

7676
.handle(Login, (state,action,dispatch)=> {
77-
fetch`https://httpbin.org/get?username=${action.username}&password=${action.password}`)
77+
const { username, password }=action.payload
78+
79+
fetch(`https://server.com/login?u=${username}&p=${password}`)
7880
.then(x=>x.json())
7981
.then(data=> {
80-
dispatch(newSetToken(data.args.username+'|'+data.args.password))
82+
/*
83+
* When server respond with token, another action is dispatching.
84+
*/
85+
dispatch(SetToken(data.token))
8186
dispatch(push('/dashboard'))
8287
})
8388

8489
returnstate
8590
})
8691

8792
.handle(Logout, (state,action,dispatch)=> {
88-
dispatch(newSetToken(undefined))
93+
dispatch(SetToken({ token:undefined }))
8994
dispatch(push('/dashboard'))
9095

9196
returnstate
@@ -108,9 +113,47 @@ export const authReducer = new ReducerBuilder<AuthState>()
108113
})
109114
```
110115

116+
##Connect
117+
118+
`connect` method is part of redux library and allows you to connect your react components with redux store. Although you can use your own implementation, this library provides you some syntactic sugar to make it easy.
119+
120+
```tsx
121+
import*asReactfrom'react'
122+
123+
import {ChangeTheme }from'../actions/layout.actions'
124+
import {Logout }from'../actions/auth.actions'
125+
126+
import {TopBar }from'../components/topBar'
127+
import {connect }from'react-redux'
128+
import {mapDispatchToProps,StateToProps }from'redux-ts'
129+
130+
const mapStoreToProps:StateToProps<StoreState>=map=>map
131+
132+
const storeProps=mapStoreToProps(store=> ({
133+
useDarkTheme:!!store.layout.useDarkTheme,
134+
}))
135+
136+
const dispatchProps=mapDispatchToProps({
137+
Logout,
138+
ChangeTheme,
139+
})
140+
141+
typeMainProps=ReturnType<typeofdispatchProps>&
142+
ReturnType<typeofstoreProps>
143+
144+
const MainContainer:React.SFC<MainProps>= ({children,...rest })=> (
145+
<div>
146+
<TopBar{...rest} />
147+
{children}
148+
</div>
149+
)
150+
151+
exportconst Main=connect(storeProps,dispatchProps)(MainContainer)
152+
```
153+
111154
##Example
112155

113-
[react-material-demo](https://github.com/cimdalli/react-material-demo) (obsolete)
156+
[react-material-demo](https://github.com/cimdalli/react-material-demo)
114157

115158
##License
116159

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"@types/chai":"^4.1.3",
5454
"@types/mocha":"^5.2.0",
5555
"@types/react":"^16.3.13",
56-
"@types/react-redux":"^5.0.19",
56+
"@types/react-redux":"^6.0.0",
5757
"chai":"^4.1.2",
5858
"mocha":"^5.1.1",
5959
"prettier-tslint":"^0.4.0",

‎src/action.model.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/helpers/redux.helpers.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import{ActionCreatorDefinition,StateToProps,DispatchToProps}from'..'
2+
3+
exportconstcreateAction=<TPayload>(
4+
type:string,
5+
):ActionCreatorDefinition<TPayload>=>{
6+
constcreator:any=(payload={},meta={})=>({
7+
type,
8+
payload,
9+
meta,
10+
})
11+
creator.type=type
12+
returncreator
13+
}
14+
15+
exportconstmapDispatchToProps:DispatchToProps=map=>dispatch=>
16+
Object.keys(map).reduce(
17+
(prev,key)=>({
18+
...prev,
19+
[key]:(...params:any[])=>dispatch(map[key](params)),
20+
}),
21+
{},
22+
)astypeofmap

‎src/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import'./polyfills/object.polyfill'
21
import'./polyfills/promise.polyfill'
3-
export*from'./action.model'
2+
export*from'./models/action.model'
3+
export*from'./models/redux.model'
44
export*from'./reducer.builder'
55
export*from'./store.builder'
6+
export*from'./helpers/redux.helpers'

‎src/models/action.model.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import{ActionasReduxAction}from'redux'
2+
3+
exportinterfaceAction<TPayload=any,TMeta=any>
4+
extendsReduxAction<string>{
5+
payload:TPayload
6+
meta:TMeta
7+
}
8+
9+
exportinterfaceActionCreatorDefinition<TPayload=any,TMeta=any>{
10+
type:string
11+
(payload?:TPayload,meta?:TMeta):Action<TPayload>
12+
}
13+
14+
exporttypeLazyDispatch=<TActionextendsReduxAction>(
15+
action:TAction,
16+
)=>Promise<TAction>
17+
18+
exporttypeActionBody<TState,TPayload>=(
19+
state:TState,
20+
action:TPayload,
21+
dispatch:LazyDispatch,
22+
)=>TState

‎src/models/redux.model.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{Dispatch,AnyAction}from'redux'
2+
import{ActionCreatorDefinition}from'..'
3+
4+
exportinterfaceStateToProps<TState=any>{
5+
<Textends{[key:string]:any}={}>(map:(store:TState)=>T):(
6+
store:TState,
7+
)=>T
8+
}
9+
10+
exportinterfaceDispatchToProps<
11+
TDispatchActionextendsAnyAction=AnyAction
12+
>{
13+
<Textends{[key:string]:ActionCreatorDefinition}>(map:T):(
14+
dispatch:Dispatch<TDispatchAction>,
15+
)=>T
16+
}

‎src/polyfills/object.polyfill.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/reducer.builder.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{ActionBody,Action,ActionCreatorDefinition}from'.'
1+
import{ActionBody,Action,ActionCreatorDefinition,LazyDispatch}from'.'
22
import{Dispatch,Reducer}from'redux'
33

44
exportclassReducerBuilder<State={}>{
@@ -20,9 +20,9 @@ export class ReducerBuilder<State = {}> {
2020
/**
2121
* Consumer definition for given action type
2222
*
23-
*@template TPayload Action type
24-
*@param {ActionClass<TPayload>}type Actionobject (should be class)
25-
*@param {ActionBody<State, TPayload>} body Action body
23+
*@template TPayload Actionpayloadtype
24+
*@param {ActionCreatorDefinition<TPayload>}creator Actioncreator function
25+
*@param {ActionBody<State,Action<TPayload>>} body Action body
2626
*@returns
2727
*@memberof ReducerBuilder
2828
*/
@@ -34,13 +34,14 @@ export class ReducerBuilder<State = {}> {
3434
returnthis
3535
}
3636

37-
privatebuild(dispatch:Promise<Dispatch>):Reducer<State,Action>{
37+
privatebuild(dispatchPromise:Promise<Dispatch>):Reducer<State,Action>{
3838
return(state=this.initState,action)=>{
39-
consttype=action.type
40-
constactionBody=this.actions[type]
39+
constactionBody=this.actions[action.type]
40+
constlazyDispatch:LazyDispatch=nestedAction=>
41+
dispatchPromise.then(dispatch=>dispatch(nestedAction))
4142

4243
if(!!actionBody){
43-
returnactionBody(state,action,a=>dispatch.then(d=>d(a)))
44+
returnactionBody(state,action,lazyDispatch)
4445
}
4546

4647
returnstate

0 commit comments

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