0.2.3 • Published 6 years ago
typux-redux v0.2.3
Typux Redux
Typux integration code for Redux
Examples
State model
// Root level of state
export interface IState
{
users : IMember[];
}
// Specific entity interface
export interface IMember
{
id : number;
name : string;
}
Messages
Messages is a typed replacement of Actions
import {Action} from "typux";
@Action('USER_CREATE')
export class CreateUser
{
public id : number;
public name : string;
}
Action creators
Now action creators is a simple factory functions. No more constants and manual payload creating. TypeScript provides a strong type checking when you call it from containers
import {CreateUser} from "../messages/users";
export const createUser = (id : number, name : string) => (
new CreateUser(id, name)
);
It's all
Store
import {createStore, combineReducers, applyMiddleware} from 'redux';
import {createConnect, typuxMiddleware} from "typux-redux";
// Import simple reducer
import {users} from "../reducers/users";
// Import out state model interface
import {IState} from "./model";
export const store = createStore<IState>(
combineReducers<IState>({
users : users
}),
applyMiddleware(
typuxMiddleware()
)
);
// Create well typed connect decorator
export const Connect = createConnect<IState>();
Reducers
import {createReducer} from "typux-redux";
// Import type for reducer
import {IMember} from "../store/model";
// Import ours messages
import {CreateUser} from "../messages/users";
export const reducer = createReducer<IMember[]>()
// Define handlers for our messages
.on(CreateUser, (state, model) => (
[...state, {id : model.id, name : model.name}]
))
.initial([]) // Or Immutable :)
.reducer() // Return reducer function
;
Containers
import * as React from 'react'
// Import strong typed connect decorator
import {Connect} from "../store/index";
// Import action creators
import {fetchUsers, createUser, deleteUser} from "../actions/users";
// Helper function
import {attachAction} from "typux-redux";
@Connect(
(state) => ({
users: state.users
}),
(dispatch) => ({
refresh : attachAction(dispatch, fetchUsers),
remove : attachAction(dispatch, deleteUser),
create : attachAction(dispatch, createUser)
})
)
export class App extends Component<any, any>
{
}
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago