https://github.com/flasd/react-redux-architecture-demo
https://github.com/flasd/react-redux-architecture-demo
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/flasd/react-redux-architecture-demo
- Owner: flasd
- Created: 2020-06-03T02:08:36.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T20:55:17.000Z (over 3 years ago)
- Last Synced: 2025-01-22T01:41:25.683Z (over 1 year ago)
- Language: TypeScript
- Size: 4.44 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Redux Architecture
## Motivation
The 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.
## Folder Structure
```tsx
src/
components/ // react components
services/ // stuff like history, Apollo Client, Firebase, Axios, etc...
screens/ // route/screen components
SomeScreen/
index.ts // container, with a function useHooksAsProps() {} and a decorator
SomeScreen.tsx // dumb React component
store/ // redux + business logic
index.ts // redux store
rootSaga.ts // self explanatory
actionCreators.ts // action creator registry
modules/
aModule/
index.ts // reducer, action creators
selectors.ts // selectors
someEffect.ts // sagas
```
## Naming Patterns
### Components
A 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.
### Screens
Follows 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.
### Services
A 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`.
### Store
The 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.
### Redux Modules
A 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.