Discussion on: Taking React and Redux to the next level with Typescript

[JLarky]

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]

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]

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 :)