Highly flexible , High scalability ,Redux , Axios , Redux-thunk , Redux-persist, Styled-components , ESlint and Prettier
This project is based on the Expo. Therefore, you can refer to its documentation to install react-native and Expo.
In this structure, we tried to bring you a good experience by combining different technologies.
components
Common
general componentsScreens
partials and styles for every main screen
screens
main screen pageshelpers
utils and javascript helpersconstants
theme
config global colors and stylesendpoints
object of endpoints servieces
store
redux repository for every main screen
Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:
Install eslint, prettier and editor config plugins into your IDE
-
npm install -g expo-cli
-
npm install –g react-native-cli
-
git clone https://github.com/MostafaRastegar/mr-react-native-starter.git
-
cd mr-react-native-starter
-
npm install
-
npm run web
ornpm run android
ornpm run ios
You create a folder for each main part of the reducer, for example, the users' folder used in the Redux store.
- store
- users
- actions
- effects
- reducers
- services
- types
- users
Includes an object of all types used in Users actions. Here are three types of typing for each request:
REQUEST, SUCCESS, FAILURE
const types = {
...
GET_ALL_USERS_REQUEST: 'GET_ALL_USERS_REQUEST',
GET_ALL_USERS_SUCCESS: 'GET_ALL_USERS_SUCCESS',
GET_ALL_USERS_FAILURE: 'GET_ALL_USERS_FAILURE',
...
};
Includes an object of all actions used in users side effects Here are three types of action for each request: request, success, failure
Naming actions are based on what they want to do. For example, when requesting we use get, post, which affects the action name. To make it easier to use the actions in different parts of the project, the 'actionMaker' helper has been used, in which case each action determines which type it belongs to. And when calling it, you no longer need to pass the type.
const types = {
...
getAllUsersRequest: actionMaker (types.GET_ALL_USERS_REQUEST),
getAllUsersSuccess: actionMaker (types.GET_ALL_USERS_SUCCESS),
getAllUsersFailure: actionMaker (types.GET_ALL_USERS_FAILURE),
...
};
reducers determine the structure of each part of our store. We have here for each request three main parameters loading, data, error
Consider that it responds to requests based on the response it receives from the server.
selectors is an object that is responsible for getting data from the store. For example, if you need to read users' data at any time.
You use the following function:
getAllUsersData
The naming of this function has three main parts. get: which always comes first in all the values of this object. name: The name of the item mentioned in the store, for example, AllUsers Content-type: which can be 'data', 'loading', and other items.
You can read the reselect documentation for more.
Services is an object that lists the requests that are to be made. And we get the 'get', 'post' operation based on the endpoints we have using Axios. From now on to request. It is enough to call the function of that request from this section.
effects is an object in which the side-effects of a request are executed by the async, await operation, and it specifies what actions are called in order during the request. And what data to transfer to the store. For this part we used redux-thunk. If you want, you can use the redux-saga and ... with changes.
Remember that after completing the work, each section must be introduced in the 'index' file located in the store. So you can call them in the components.
for example:
export {default as usersSelectors} from './users/selectors';
export {default as usersEffects} from './users/effects';
export {default as usersActions} from './users/actions';
export {default as usersServices} from './users/services';
export {default as usersTypes} from './users/types';
Here we are on the track ~/components/Screens/Users/index.js We created a component to display users that displays their list after requesting. First, we import usersEffects and usersSelectors objects from the store on the component.
In the didMount component, we call a function related to the desired request.
useEffect (() => {
dispatch (usersEffects.getAllUsersRequest ());
}, []);
All steps of extracting to store data in the store are handled by effects.
For read the new data from the store, just call the corresponding selector.
for example:
const allUsersData = useSelector ((state) =>
usersSelectors.getAllUsersData (state),
);
Finally, after loading is 'false', you can display the list of users.