JaysonChiang

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

export default {
  addCount
};

JaysonChiang

import { useActions } from "./useActions";

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

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

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

JaysonChiang

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

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

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

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

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

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

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

const Search = () => {
  const inputRef = useRef(null);
  const [name, setName] = useState('');

  useEffect(() => {
    inputRef.current.focus();
  }, []);
  

JaysonChiang

const EventComponent: React.FC = () => {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    console.log(event);
  };

  return (

JaysonChiang

const EventComponent = () => {
  const onChange = (event) => {
    console.log(event);
  };

  return (
    <div>
      <input onChange={onChange} />
    </div>
  );