Let’s Learn Modern Redux! (with Mark Erikson) — Learn With Jason

CodeTV · 150K views · 2021 · 1:30:51

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when explaining how to create typed useAppSelector and useAppDispatch hooks for Redux Toolkit with TypeScript.

Recommended by 1 people across 1 different months, 2021 to 2022.

What it is

A live-coded Learn With Jason episode where Redux maintainer Mark Erikson teaches modern Redux using Redux Toolkit, React-Redux hooks and a bit of RTK Query. They build a small app (a dog API demo) with TypeScript and Vite, with the demo and repo linked in the description.

What people said

Recommends Luciano Cavallo · 2022-03 · Stack Overflow · on “React-Redux useSelector typescript type for state”

In this [this video] video, Mark Erikson shows how to create some custom useAppSelector and useAppDispatch, to give them the correct types. Example in hooks.ts: import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; import { RootState, AppDispatch } from './store'; export const useAppDispatch = () => useDispatch<AppDispatch>(); export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; And then in store.ts we have: import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension'; import productsReducer from '../slices/products.slice'; const store = createStore( productsRedu

Cites frogg · 2021-09 · Stack Overflow · on “reducer/action not updating slice”

the reason for this is because setUser is an action and the action needs to be dispatched. Per Mark Erikson's Video [this video] from may it is advisable to create a typed version of the useSelector and useDispatch hooks when working with typescript. import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import { RootState, AppDispatch } from "./store"; export const useAppDispatch = () => useDispatch<AppDispatch>(); export const userAppSelector: TypedUseSelectorHook<RootState> = useSelector; you then import the hooks from the hooks file not react-redux and dispatch or select from there: const dispatch = useAppDispatch(); dispatch(setUser(auth.currentUser));

Cites usama rashad · 2022-10 · Stack Overflow · on “Is the "TypedUseSelectorHook" necessary?”

I am relatively new to React with Typescript so I was following the video which was made by Mark Erikson and Jason Lengstorf on the Redux Toolkit website. Here is the link [this video] incase you want to see it. At approximately 45 minutes in, Mark mentions two constructs which can be seen in the image below. (lines 4 and 5). See picture [LINK] I had some trouble understanding these constructs so I made my own counter example using redux toolkit. I did not have to use the typecasts as Mark did. I just want someone to confirm that what I did is also OK and perhaps explain the differences. My code can be found in this Code Sandbox Link [LINK] . Basically the exports in the store look like this : //