Architecture - orangehrm/orangehrm-os-mobile GitHub Wiki

Project Architecture

Unidirectional data flow

Redux architecture revolves around a strict unidirectional data flow.

• Component handles an event and dispatches an action
• Redux calls the reducer functions
• Related reducer function updates the state
• Containers that are listening for the change of that state slice, gets notified
• Containers updates Component with the new state and props
• Component gets re-rendered if props are changed

Thanks to this article

Why Typescript

• Code easier to understand
  • What arguments does it accept?
  • What value does it return?
  • What external data does it require?
  • What does it do with these arguments and external data in order to produce the return value?
• Code easier and faster to implement
• Code easier to refactor

Dependencies

    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.8.2",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.5.1",
    "native-base": "^2.13.12",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-vector-icons": "^6.6.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0"

Testing

• Jest for component testing

CI/CD pipeline

• github action to build/test code