React-Native : pass data from ui layer to the server using redux

Lets say a login form and now we need to login the user. Below are the steps involved if we are doing this using redux

In the services file, add a method like below

async function

So it all begins with creating an action in the action class. For e.g the action could be like this below.
So essentially, this function returns a method that returns a JSON object that contains the key value pairs containing necessary
Info for login

SignInActions.js

Export const performUserSignIn = (username, password) => ({
type : ActionTypes.SIGNIN_USER,
username : username,
password : password;})

All these are info for reducers. Type indicates the action type. ActionType is an import like this below

Import ActionTypes from ./actionTypes.js

Now in the ui file, this action can be mapped to property like this below

Import SignInActions from ./SignInActions.js

Function mapDispatchToProps(){
   loginUser : SignInActions. performUserSignIn
}

This mapped dispatch can be called like this

this.props.loginUser("test","password1");

Now we need to have a reducer which will be like below


References: