[Redux Migration Example] Step 2

UsersListV2.tsx

import * as React from "react"
import { useSelector, useDispatch } from "react-redux"

// UserItem represents a user item in the list
import UserItem from "app/components/UserItem";

type RootReducer = {
  users: UserReducerState;
}

const getUserState = (state: RootReducer): UserReducerState => state.users;
const getUsers = createSelector(
  getUserState,
  (userState): User[] => Object.values(userState)
);

const UsersList: React.FC = () => {
  const users = useSelector(getUsers);
  const dispatch = useDispatch();
  const onDelete = (user: User) => {
    dispatch({ type: "DELETE_USER", payload: user });
  }
  const onUpdate = (user: User) => {
    dispatch({ type: "UPDATE_USER", payload: user });
  }
  return users.map((user: User) => {
    return <UserItem key={user.id} onTapDelete={onDelete} onUpdated={onUpdate} />;
  });
}
export default UsersList;