JaysonChiang

import { useState, useRef, useEffect } from 'react';

const Search: React.FC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [name, setName] = useState('');

  useEffect(() => {
    if (!inputRef.current) {
      return;
    }

JaysonChiang

const ADD_TODO = 'add_todo';
const ADD_TODO_SUCCESS = 'add_todo_success';
const ADD_TODO_ERROR = 'add_todo_error';

const initialState = {
  loading: false,
  error: null,
  data: [],
}

JaysonChiang

enum ActionType {
  ADD_TODO = 'add_todo',
  ADD_TODO_SUCCESS = 'add_todo_success',
  ADD_TODO_ERROR = 'add_todo_error',
}

interface TodoState {
  loading: boolean;
  error: string | null;
  data: string[];

JaysonChiang

enum ActionType {
  ADD_TODO = 'add_todo',
  ADD_TODO_SUCCESS = 'add_todo_success',
  ADD_TODO_ERROR = 'add_todo_error',
}

interface TodoState {
  loading: boolean;
  error: string | null;
  data: string[];

JaysonChiang

import { useDispatch } from "react-redux";
import actionCreators from "./action-creators";

const AddButton = () => {
  const dispatch = useDispatch();

  const onClick = () => {
    dispatch(actionCreators.addCount());
  };

JaysonChiang

import { useActions } from "./useActions";

const AddButton = () => {
  const { addCount } = useActions();

  const onClick = () => {
    addCount();
  };

  return <button onClick={onClick}>+1</button>;

JaysonChiang

const addCount = () => ({
  type: "ADD_COUNT"
});

export default {
  addCount
};

JaysonChiang

import { useSelector } from 'react-redux';

const TodoList: React.FC = () => {
  const { todos } = useSelector((state) => state.todos);
  // Property 'todos' does not exist on type 'DefaultRootState'.

  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo}</li>

JaysonChiang

import { useSelector } from './useSelector';

const TodoList: React.FC = () => {
  const { todos } = useSelector((state) => state.todos);

  return (
    <ul>
      {todos.map((todo) => (
        <li>{todo}</li>
      ))}

JaysonChiang

const joe = {
  update(message) {
    console.log(`Joe receive ${message}`);
  }
}

const jason = {
  update(message) {
    console.log(`Jayson read ${message}`);
  }