{"id":19697473,"url":"https://github.com/saturnism/todo-react-umi-dva","last_synced_at":"2025-07-17T08:38:26.789Z","repository":{"id":147614768,"uuid":"177516898","full_name":"saturnism/todo-react-umi-dva","owner":"saturnism","description":"An example Todo app using React, Ant Design, umi, and dva. With mocked service to run locally.","archived":false,"fork":false,"pushed_at":"2019-04-03T00:32:37.000Z","size":421,"stargazers_count":8,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T15:11:25.258Z","etag":null,"topics":["ant-design","antd","crud","crud-sample","dva","dvajs","react","react-redux","react-router","reactjs","redux","todo","todoapp","typescript","umi","umijs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saturnism.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-25T04:56:01.000Z","updated_at":"2020-06-15T08:40:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"27f537e8-d135-4d00-8b9d-21a14e907c58","html_url":"https://github.com/saturnism/todo-react-umi-dva","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saturnism%2Ftodo-react-umi-dva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saturnism%2Ftodo-react-umi-dva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saturnism%2Ftodo-react-umi-dva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saturnism%2Ftodo-react-umi-dva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saturnism","download_url":"https://codeload.github.com/saturnism/todo-react-umi-dva/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251494133,"owners_count":21598241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","crud","crud-sample","dva","dvajs","react","react-redux","react-router","reactjs","redux","todo","todoapp","typescript","umi","umijs"],"created_at":"2024-11-11T19:38:25.870Z","updated_at":"2025-04-29T11:32:28.938Z","avatar_url":"https://github.com/saturnism.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Todo App with umi, dva\n\n## Introduction\nThis is my attempt to build a simple Todo app with umi, dva.\n\n## Setup\n\n## From Scratch\nA sequence of steps that I did to create this Todo app.\n\n### Install umi\n1. Read [umi Getting Started guide]\n1. `yarn global add umi`\n\n### Bootstrap Todo application\n1. Create a new project directory: `mkdir todo-umi-dva`\n1. Bootstrap `umi`: `yarn create umi`\n   1. For *boilerplate type*: choose *app*\n   1. For *use typescript*: enter *y*\n   1. For *functionality do you want to enable*, select everything(*antd*, *dva*, *code splitting*, *dll*, *internationalization*)\n1. Install dependencies: `yarn install`\n1. Run in dev mode: `umi dev`\n1. Visit via the browser: `http://localhost:8000`\n\n### Use Ant Design's CSS\n1. Edit `src/layouts/index.css`\n   1. Import antd's CSS: `@import '~antd/dist/antd.css';` (From [Ant Design's Use in Typescript](https://ant.design/docs/react/use-in-typescript))\n   1. Delete `font-family` related lines to use Ant Design's default. \n\n### Use Ant Design's Layout\n1. Edit `src/layouts/index.tsx`\n   1. Import Ant components\n       ```\n       import { Layout, Menu, Breadcrumb } from 'antd';\n       const { Header, Content, Footer } = Layout;\n       ```\n   1. Update `render()` to return Ant layout. Notice `props.children` is rendered within the `Content` block.\n\n### Create a Todo Model and Mock Service\n1. Create Todo directory: `mkdir -p src/pages/todo`\n1. Create a file to declare domain types: `touch src/pages/todo/types.ts`\n   1. Create a `Todo` class. We'll come back to the Model file to wire up `dva`\n1. Create a Mock file to host the mock service: `touch src/pages/todo/_mock.ts`\n   1. Mock `/api/todos` service (see [source](src/pages/todo/_mock.ts))\n   1. Try it out:\n      1. Post new Todo: `curl -XPOST -H\"Content-Type: application/json\" -d'{\"description\" : \"hello\"}' localhost:8000/api/todos`\n      1. Get Todos: `curl localhost:8000/api/todos`\n      1. Patch Todo: `curl -XPATCH -H\"Content-Type: application/json\" -d'{\"completed\": true}' localhost:8000/api/todos/0`\n\n### Create a Todo Service\n1. Create a Service file: `touch src/pages/todo/service.ts`\n   1. Create `TodoService`, see [source](src/pages/todo/service.ts)\n\n### Create the UI\n1. Create an `index.tsx` file: `touch src/pages/todo/index.tsx`\n1. Put in the basic frontend code:\n1. Refresh the page to see it: `http://localhost:8080/todo`\n\n### Wire up DVA\nThis is perhaps the most complicated thing... :/\n\n1. Create `src/pages/todo/model.ts`\n   1. Set namespace to `todos`\n   1. Create `TodoState`\n   1. Initialize state as a type of `TodoState`\n   1. Add a reducer\n   1. Add effects. Each \"effect\" is later triggered by `dispatch` as `type: \"[namespace]/[effect name]\"`, with `payload`\n   1. Once an effect is completed, use `yield put` to trigger a reducer\n1. In `src/pages/todo/index.tsx`\n   1. Declare an Props interface to access `dispatch`, `loading`, and data from `dva`\n       ```\n       interface ViewProps extends TodoState {\n         dispatch: any;\n         loading: boolean;\n       }\n       ```\n   1. Use decoration to connect `dva` to component. \n       ```\n       @connect(({ todos, loading }) =\u003e ({\n         todos,\n         loading: loading.models.todos,\n       }))\n       ```\n    1. What does `@connect` do? See [this blog](https://www.cnblogs.com/bjlhx/p/9009056.html), and [Proper Typing of react-redux Connected Components](https://medium.com/knerd/typescript-tips-series-proper-typing-of-react-redux-connected-components-eda058b6727d)\n    1. Where does `loading` coming from? See [dva#1464](https://github.com/dvajs/dva/issues/1464)\n\n### Link \u0026 Navigation\n1. In `src/layouts/index.tsx`\n   1. Each `\u003cMenu\u003e` uses the path as `key`, e.g., `\u003cMenu.Item key=\"/\"\u003eHome\u003c/Menu.Item\u003e`\n   1. Use `\u003cLink\u003e` to navigate to URL, e.g., `\u003cLink to=\"/\"\u003eHome\u003c/Link\u003e`\n   1. In `\u003cMenu\u003e`, use `location.pathname` to select current item: `\u003cMenu ... defaultSelectedKeys={[location.pathname]}\u003e...\u003c/Menu\u003e`\n\n### Page Title\n1. Read [UmiJS - Router - Extending Routing by Annotation](https://umijs.org/guide/router.html#extending-routing-by-annotation)\n1. Page title can be set in the comment\n    ```\n    /**\n     * title: Page Title\n     */\n    ```\n\n### Lint\n1. Read [umi-lint](https://www.npmjs.com/package/umi-lint) instructions\n1. Add lint: `yarn add umi-lint --dev`\n1. Add to `package.json`\n    ```\n    \"scripts\": {\n      ...\n      \"lint:umi\": \"umi-lint --tslint --prettier  src/\",\n      \"precommit:umi\": \"umi-lint --staged --tslint --stylelint --prettier --fix\"\n      ...\n    }\n    ```\n1. Run: `yarn lint:umi`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaturnism%2Ftodo-react-umi-dva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaturnism%2Ftodo-react-umi-dva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaturnism%2Ftodo-react-umi-dva/lists"}