phucdph

const BasicForm = () => {
  const handleSubmit = React.useCallback((values: IFormValues) => {
    console.log(values);
  }, []);

  return (
    <Formik<IFormValues>
      initialValues={{
        username: "",
        name: "",

phucdph

interface IFormValues {
  username: string;
  name: string;
  email: string;
  password: string;
  password_confirmation: string;
}

phucdph

import * as React from "react";
import { ITodo } from "./services/typings";

interface IProps {
  data: ITodo[];
  isLoading: boolean;
  onGetTodos: () => void;
}

const TodoList = (props: IProps) => {

phucdph

import * as React from "react";
import TodoList from "./TodoList";
import { useTodos } from "./hooks";

const TodoListContainer = () => {
  const { data, isLoading, dispatchGetTodos } = useTodos();

  return (
    <TodoList data={data} isLoading={isLoading} onGetTodos={dispatchGetTodos} />
  );

phucdph

import { useDispatch, useSelector } from "react-redux";
import { useCallback } from "react";
import { getTodos, getTodosSuccess, getTodosFail } from "./actions";
import { todoListStateSelector } from "./selectors";
import todoService from "./services/todoService";

export const useTodos = () => {
  const dispatch = useDispatch();

  const dispatchGetTodos = useCallback(async () => {

phucdph

import { TodoListState } from "./state";
export const todoListStateSelector = (state: any): TodoListState => state.todo;

phucdph

import { initialState, TodoListState } from "./state";
import { handleActions, Action } from "redux-actions";
import { getTodos, getTodosSuccess, getTodosFail } from "./actions";
import { ITodo } from "./services/typings";

const reducers = handleActions(
  new Map([
    [
      getTodos,
      (state: TodoListState, action: Action<{}>) => ({

phucdph

import { createAction } from "redux-actions";

const getTodos = createAction("GET_TODOS");
const getTodosSuccess = createAction("GET_TODOS_SUCCESS");
const getTodosFail = createAction("GET_TODOS_FAIL");

export { getTodos, getTodosSuccess, getTodosFail };

phucdph

import { ITodo } from "./typings";

export default {
  getTodos: async (): Promise<ITodo[]> => {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos");
    const json = await res.json();
    return json;
  }
};

phucdph

export interface ITodo {
  id: string;
  title: string;
  completed: boolean;
}