{"id":24518215,"url":"https://github.com/flasd/react-redux-architecture-demo","last_synced_at":"2025-07-09T12:46:50.890Z","repository":{"id":38773719,"uuid":"268954115","full_name":"flasd/react-redux-architecture-demo","owner":"flasd","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T20:55:17.000Z","size":4656,"stargazers_count":1,"open_issues_count":21,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-22T01:41:25.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/flasd.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}},"created_at":"2020-06-03T02:08:36.000Z","updated_at":"2020-06-03T15:42:12.000Z","dependencies_parsed_at":"2022-09-17T12:42:10.690Z","dependency_job_id":null,"html_url":"https://github.com/flasd/react-redux-architecture-demo","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/flasd%2Freact-redux-architecture-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Freact-redux-architecture-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Freact-redux-architecture-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Freact-redux-architecture-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flasd","download_url":"https://codeload.github.com/flasd/react-redux-architecture-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719398,"owners_count":20336607,"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":[],"created_at":"2025-01-22T01:40:58.479Z","updated_at":"2025-03-15T11:12:08.199Z","avatar_url":"https://github.com/flasd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Redux Architecture\n\n## Motivation\n\nThe idea of this architecture is to separate business logic, UI logic and UI rendering. The idea is to never have to compose HOCs (connect + withHooks for example) and never have business logic inside the withHooks HOC. All business logic will live inside sagas and reducers, which are by nature easy to test.\n\n## Folder Structure\n\n```tsx\nsrc/\n\tcomponents/ // react components\n\tservices/ // stuff like history, Apollo Client, Firebase, Axios, etc...\n\tscreens/ // route/screen components\n\t\tSomeScreen/\n\t\t\tindex.ts // container, with a function useHooksAsProps() {} and a decorator\n\t\t\tSomeScreen.tsx // dumb React component\n\tstore/ // redux + business logic\n\t\tindex.ts // redux store\n\t\trootSaga.ts // self explanatory\n\t\tactionCreators.ts // action creator registry\n\t\tmodules/\n\t\t\taModule/\n\t\t\t\tindex.ts // reducer, action creators\n\t\t\t\tselectors.ts // selectors\n\t\t\t\tsomeEffect.ts // sagas\n```\n\n## Naming Patterns\n\n### Components\n\nA component is the sum of a Container (`index.ts` file), a view file (`ComponentName.tsx` file) inside a folder with the same name as the view file. The view file name and the folder name should be in PascalCase.\n\n### Screens\n\nFollows the Components convention. If used in the browser, the view file name should be a PascalCase version of the URL path the component represents. On React Native the view name can be the most appropriate name given its job.\n\n### Services\n\nA service is one or more files containing infrastructure logic (logic required by your business logic to work, for example Axios) inside a folder. The folder must have a `index.ts` file where all \"public\" exports will be declared. The folder name should be a lowercase string containing the name of the service, for example: `axios` or `graphql`.\n\n### Store\n\nThe store folder contains the Redux store `index.ts`, a Root Saga `rootSaga.ts` (entry point for Redux-Saga) and a Action Creators Registry `actionCreators.ts` (declarion point for React Redux Action Creator Registry). This files should be named as written above.\n\n### Redux Modules\n\nA redux module is the sum of a `index.ts` file where you declare the reducer and actions, a `selectors.ts` where you declare selectors, and one file for each saga, named with the side effect name in camelCase ending with the word Effect (for example `getTodoEffect.ts`. It should be a sub-folder with the name of the module inside the `store/modules` folder.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Freact-redux-architecture-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflasd%2Freact-redux-architecture-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Freact-redux-architecture-demo/lists"}