DEV Community

Taking React and Redux to the next level with Typescript

Leo Melo on September 02, 2019

Prologue If you ever used Redux before you know that much of the ways we write Redux logic and why it works relies on us knowing the sha...

Read full post

JLarky • Sep 3 '19

I can recommend also checking out some other ways to implement type safe redux medium.com/@dhruvrajvanshi/some-ti... and gist.github.com/JLarky/93d6b5c87a7...

as for TMoviesListProps example with hooks you can actually do pretty cool stuff

import { TypedUseSelectorHook, useDispatch as useDispatchGeneric, useSelector as useSelectorGeneric } from "react-redux";

export const useSelector: TypedUseSelectorHook<AppState> = useSelectorGeneric;
export const useDispatch: () => Dispatch<Action> = useDispatchGeneric;

function useRedux() {
    const movies = useSelector(state => state.movies.movies);
    const isLoaded = useSelector(state => state.movies.moviesLoaded);
    const moviesLoadedAt = useSelector(state => state.movies.moviesLoadedAt);
    const dispatch = useDispatch();
    return {
        movies,
        isLoaded,
        moviesLoadedAt,
        dispatch,
    };
}

type TMoviesListProps = ReturnType<typeof useRedux>;

export default function MoviesListContainer() {
    const props = useRedux();
    return <MoviesList {...props} />;
}

Leo Melo • Sep 3 '19

Thanks for sharing this, I haven't got to using Redux with hooks yet... That was gonna be my next step with that code base, converting it all to hooks.

I might post a follow up to this with some hooks code once I get around to it.

JLarky • Sep 3 '19

I like that hooks and custom hooks allow you to easily make sure that your react component is typed. Compare const [value] = React.useState("") which clearly has value typed as string with all that duplicated code to properly add state to the component. I'm not converting all of my code base to hooks just yet :) but first thing that I'm going to convert is probably going to be all that react-redux connect code :)

Jj Medina • Oct 25 '19

So, keeping in mind that I'm brand new to TypeScript, I don't think it was clear where you got the Dispatch from in the line const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>

Kevin Sullivan • Nov 21 '19

import { Dispatch} from redux
More cool stuff github.com/piotrwitek/react-redux-...

Johannes Lichtenberger • Sep 2 '19

Hmm, I'm just thinking that it probably would be great to persist the application states and be able to restore the full history sometimes :-)