Scribd
Upload
38 views5 pages

Photojaanic App Data Flow Diagram & Redux Structure

Uploaded by

Arvind Sahani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views5 pages

Photojaanic App Data Flow Diagram & Redux Structure

Uploaded by

Arvind Sahani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Photojaanic App Data flow Diagram & Redux Structure

Data flow Diagram:

Link: https://boardmix.com/app/share/CAE.CNXlJiABKhCHMJVbTIuevE-
lHfBrpeSfMAZAAQ/SrxNvH

Redux Stuff:
1. Define State Structure: first will init the redux structure Like create 3 basic folder Action Reducer Store
Identify and define the shape of the state that will be managed by Redux

2.Create Action Types:Define the action types that describe the different actions that can be performed in
the application.Its unique identity of the action
For example :IS_LOGIN,USER_DETAILS

3.Action Creator: Write action creators that return action objects. These functions will be used to dispatch
actions to the Redux store.
Let take example of the is user login or not:

const IsLoginAction = () => ({ type: actionTypes.IS_LOGIN,payload:true });

4.Reducers: Create reducers to handle the state changes based on the dispatched actions. The reducers should be
pure functions that return the new state.main use for the manage the data and update data in redux store

const isLoginReducer = (state = initialState, action) => { switch (action.type) {


case actionTypes.IS_LOGIN: return { ...state, payload:action.payload, error: null };
default: return state;
}
};

5. Middleware for Asynchronous Actions:we will use the thunk for handling asynchronous actions such as API calls.
For the local data store we are using the persist and asyncstorage so that we can load data easily from the cache.

6. Store Configuration: Configure the Redux store with reducers and middleware.for manage all data centrally from
the store and we can use anywhere in the app

7.Connecting the redux action and store with UI. like from component click and render time will use for data dispatch
and get data from the store via the selector.

-> Some of basic apis like categories will also store in reducers so we don't need to call every place we can take data
directly from the store easily.Our projects also we can store it on redux, so we can quickly show it the users and must
be able to review the orders

For Smooth user experience :


Will create components as possible and reuse them.
Also we usememo,custom hook use callback where require.
For android will use prograd so that we can reduce the app size.
Also will try to svg for image icon and for notification will use firebase.
Will avoid the unnecessary rerenders in app so the app performance will more smooth
Texture data flow for the App:

+-------------------+
| |
| User |
| |
+---------+---------+
|
|
v
+---------+---------+ +-------------------+
| | | |
| Manage Profile +----------> User Data Store |
| | | |
+---------+---------+ +---------+---------+
|
|
v
+---------+---------+ +-------------------+
| | | |
| Create Photobook +----------> Photo Data Store|
| | | |
+---------+---------+ +---------+---------+
|
|
v
+---------+---------+ +-------------------+
| | | |
| Edit Photos +----------> Order Data Store|
| | | |
+---------+---------+ +-------------------+
|
|
v
+---------+---------+
| |
| Order Prints |
| |
+---------+---------+
|
|
v
+---------+---------+
| |
| Create Calendar |
| |
+---------+---------+
|
|
v
+---------+---------+
| |
|Create Photo Magnets|
| |
+---------+---------+
|
|
v
+---------+---------+
| |
| Create Notebook |
| |
+---------+---------+
|
|
v
+---------+---------+
| |
|Create Decor Products|
| |
+---------+---------+
|
|
v
+---------+---------+
| |
| Manage Cart |
| |
+---------+---------+
|
|
v
+---------+---------+
| |
| User Support |
| |
+-------------------+

You might also like