@hasali19/ts-react-redux v1.1.0

ts-react-redux

This library provides a set of helper classes and functions to make working with Redux and React easier with TypeScript.

Installation

npm install @hasali19/ts-react-redux

Examples

Define action creators and reducer

import { ActionCreator } from '@hasali19/ts-react-redux';

type Action = typeof ActionCreators[keyof typeof ActionCreators];
type State = typeof initialState;

export const addTodo = new ActionCreator<'ADD_TODO', string>('ADD_TODO');

// Neccessary for Action to include types of all action creators
const ActionCreators = { addTodo };

const initialState = {
    todos: [] as string[],
};

export default function reducer(state = initialState, action: Action): State {
    switch (action.type):
        case addTodo.type:
            return { ...state, todos: state.todos.push(action.payload) };
    return state;
}

Connect react component

import * as React from 'react'
import { connect, returntypeof } from '@hasali19/ts-react-redux';
import { addTodo } from './store';

const mapStateToProps = (state: RootState) => ({
    todos: state.todos,
});

const mapDispatchToProps = (dispatch) => ({
    addTodo: (todo) => dispatch(addTodo.create(todo)),
});

const stateProps = returntypeof(mapStateToProps);
const dispatchProps = returnTypeOf(mapDispatchToProps);
type Props = typeof stateProps & typeof dispatchProps;

@connect(mapStateToProps, mapDispatchToProps)
class TodoList extends React.Component<Props> {
    public render() {
        return (
            <ul>
                {this.props.todos.map((todo) => (
                    <li>{todo}</li>
                ))}
            </ul>
        );
    }
}