{"id":22170514,"url":"https://github.com/rcopeland/anime-todo","last_synced_at":"2025-06-19T03:47:35.679Z","repository":{"id":68125595,"uuid":"602285248","full_name":"RCopeland/anime-todo","owner":"RCopeland","description":"I wanted to try out Redux toolkit, so I made an Anime todo list app that talks to AniList's API.","archived":false,"fork":false,"pushed_at":"2023-02-16T18:10:13.000Z","size":295,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T22:24:51.756Z","etag":null,"topics":["anime","demo","redux-toolkit","rtk"],"latest_commit_sha":null,"homepage":"https://anime-todo.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RCopeland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-02-15T22:10:36.000Z","updated_at":"2023-02-16T18:13:47.000Z","dependencies_parsed_at":"2024-05-07T13:45:21.863Z","dependency_job_id":null,"html_url":"https://github.com/RCopeland/anime-todo","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/RCopeland%2Fanime-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RCopeland%2Fanime-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RCopeland%2Fanime-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RCopeland%2Fanime-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RCopeland","download_url":"https://codeload.github.com/RCopeland/anime-todo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245319755,"owners_count":20596030,"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":["anime","demo","redux-toolkit","rtk"],"created_at":"2024-12-02T06:51:42.910Z","updated_at":"2025-03-24T17:40:22.391Z","avatar_url":"https://github.com/RCopeland.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Anime Todo\n\n![screenshot of anime todo site](https://github.com/rcopeland/anime-todo/blob/main/screenshot.jpeg?raw=true)\n\n## Background\n\nI wanted to try out Redux toolkit. I've tried Redux and found all the\nboilerplate cumbersome. I had heard about the concept of a 'slice' and\nwanted to try it out.\nI thought I'd make some kind of app using a free API to try it out. I\nfound the AniList Api and decided to make a simple todo list app around it.\n\n## Design\n\nI saw this being a test of RTK, so I decided to put all the state into the global\nstore, instead of keeping some stuff in local state, like I might do otherwise.\nSo generally, the components are going to be presentational and the state will live\nin the redux store. The components will dispatch events that will update the app\nstate, then react by rerendering when the state they use changes.\n\n## Implementation\n\nI built out components like normal and then created a global store for the app\nstate. The AniList Api provides a GraphQL interface, so I decided to use that for\nthis.\nSo if I weren't using RTK, I might house the Api interaction inside a custom hook,\nmaybe it would return something like:\n\n```javascript\nconst [loading, data, error, request] = useGetAnime();\n```\n\nwhere you would call the request function to kick off the request, the loading var\nwould flip over to true, then eventually would flip back false and data would have your payload.\n\nBut I notice that RTK slices are following this kind of pattern. They have a collection of state\nwhere you can put things like loading and data. They have actions that they supply and respond to,\nsimilar to the request function I would have done.\n\nI also liked the grouping into a slice, by 'feature'. This provides modularity at an organization level\nthat's intuitive. You can look at a features folder and tell what things are for. I've seen some\ngnarly redux powered sites that have an action creators folder packed with generic files that are impossible to\nfigure out.\n\nThe slice concept opens up for adding in more state. The downside of the hooks approach is that you have to either\noverload the hook to do more stuff and possibly make it hard to maintain, or you can create more hooks, for example:\n\n```javascript\nconst [loading, data, error, request] = useUpdateAnimeList();\n```\n\nsomething like that, where you have another hook for updating.\n\nIn the slice, you already have system that's set up for holding state, actions and reducers, so adding more stuff is\na natural fit.\n\nTyping the redux stuff is hard and confusing, no change there.\n\n## Testing\n\n// TODO: write up once i've added tests\n\n## Conclusion\n\n// TODO: write up once i'm finished\n\n// TODO: fix type errors / remove ignores\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcopeland%2Fanime-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcopeland%2Fanime-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcopeland%2Fanime-todo/lists"}