0.0.5 • Published 6 years ago
typlux v0.0.5
Typlux
Typlux is a TypeScript friendly implementation of Flux architecture which is writtern in TypeScript.
Install
- npm
$ npm install typlux
- yarn
$ yarn add typlux
Usage
Declare flux elements
Action
export default interface ExampleActionType { }
export class StartSomeAction implements ExampleActionType { constructor(public hoge: string) { } }
State
export interface ExampleState {
hoge: string,
fuga: string
}
ViewProperty
export interface ExampleState {
foo: string,
bar: string
}
ActionCreator
export class ExampleActionCreator extends ActionCreator<ExampleActionType, ExampleState> {
constructor(
protected dispatch: (action: ExampleActionType) => void,
protected state: ImmutableVariable<ExampleState>) {
super()
}
someAction(hoge: string) {
this.dispatch(new StartSomeAction(hoge))
}
}
Reducer
const exampleReducer: (action: ExampleActionType, state: ExampleState) => ExampleState =
(action: ExampleActionType, state: ExampleState) => {
if (action instanceof StartSomeAction) {
return {
...state,
hoge: action.value
}
} else if (...) {
.
.
.
}
return state
}
export default exampleReducer
Getter
const exampleGetter: (state: ExampleState) => ExampleViewProperty = (state: ExampleState) => {
return {
foo: state.hoge,
bar: state.fuga
}
}
export default exampleGetter
Store
export default class ExampleStore extends Store<ExampleActionCreator, ExampleActionType, ExampleState, ExampleViewProperty> {
protected provideActionCreator(dispatch: (action: ExampleActionType) => void, state: ImmutableVariable<ExampleState>): ExampleActionCreator {
return new ExampleActionCreator(dispatch, state, this.exampleRepository)
}
protected provideReducer(): (action: ExampleActionType, state: ExampleState) => ExampleState {
return exampleReducer
}
protected provideGetter(): (state: ExampleState) => ExampleViewProperty {
return exampleGetter
}
protected provideInitialState(): ExampleState {
return {
hoge: "foo",
fuga: "bar"
}
}
}
Connect store and component
Store for specific component
TBD
Store for whole application
TBD
Please see example
Example
Development
$ npm install
$ npm run dev
$ npm run build