Action-typed
Better type-safety, with less actual typing for Redux actions
Install
npm i action-typed
yarn add action-typed
Why
Video walkthrough if you prefer: https://www.youtube.com/watch?v=v263zMyVv6k
Example
user.actions.ts
import {ActionHandler, msgCreator} from "action-typed";
const messages = {
SignedIn: (firstname: string, lastname: string) => ({firstname, lastname}),
Token: (token: string) => token,
SignOut: () => undefined,
};
export const Msg = msgCreator(messages);
export type Handler = ActionHandler<typeof messages>
index.ts
import {combineReducers, createStore} from "redux";
import {userReducer} from "./user.reducer";
import {Msg} from "./user.actions";
const root = combineReducers({
user: userReducer
});
const store = createStore(root);
store.dispatch(
Msg("SignedIn", "shane", "osbourne")
);
user.reducer.ts
import {Handler} from "./user.actions";
type State = {
token: string
};
const initialState: State = { token: "" };
export function userReducer(state = initialState, action: Handler): State {
switch (action.type) {
case "Token": {
return { ...state, token: action.payload }
}
}
return state;
}
component example mapDispatchToProps
import React, { Component } from 'react';
import {connect} from "react-redux";
import {Msg} from "./actions/counter.actions";
import {StoreState} from "./configureStore";
type AppProps = {
Msg: typeof Msg,
counter: number,
}
class App extends Component<AppProps> {
render() {
const {Msg, counter} = this.props;
return (
<div className="App">
{counter}
<button onClick={() => Msg("Increment")}>Increment</button>
<button onClick={() => Msg("Decrement", 20)}>Decrement by 20</button>
</div>
);
}
}
export default connect(
(x: StoreState) => ({ counter: x.counter }),
{Msg}
)(App);