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>
{
    
}