React Native using Redux - An Intro

Nisha Gupta — Sun, 12 Apr 2020 18:35:32 +0000

This article introduces the concept of Actions, Reducers, Store.

Actions

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Type:- Actions are plain JavaScript objects. Actions must have a type of property that indicates the type of action being performed. Types should typically be defined as string constants. Once your app is large enough, you may want to move them into a separate module.

Action type: -
Here's an example action which represents request the client info:
export const REQUEST_CLIENT = 'REQUEST_CLIENT';

Action creator:- function which return actions.
Example, where API has been called to fetch the client's list.

export function requestClient() {
    return {
       type: REQUEST_CLIENT,
      }
    }

 export function fetchClientWithId(id) {
 return dispatch => {
    dispatch(requestClient())
  var clientList = store.getState().clients.clientList;
    return fetchAPI('GET', 'clients/{0}'.format(id)).then((json) => 
    {
        if (json != null) {
        dispatch(receiveClient([json]))
        return json
        }
    })
 }
}

Reducers

A reducer (also called a reducing function) is a function that accepts an accumulation and a value and returns a new accumulation. They are used to reduce a collection of values down to a single value This is a reducer, a pure function with (state, action) => state signature. * It describes how an action transforms the state into the next state. Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

Ex:-

function
counter(state = 0, action) 
{ 
 switch (action.type) 
  { 
    case 'INCREMENT’:
       return state + 1 
   case 'DECREMENT’: 
     return state - 1 default: return state 
  }
}

Create the new state:- var newState = Object.assign({}, state, {});

Use of Reducer composition:- It's important to note that you'll only have a single store in a Redux application. When you want to split your data handling logic, you'll use reducer composition instead of many stores.

Do not put API calls into reducers.*

export type Reducer = (state: S, action: any action) => S; (refer the index.d.ts in redux file in node_modules folder)

Store

In the previous sections, we defined the actions that represent the facts about “what happened” and the reducers that update the state according to those actions.
The Store is the object that brings them together. The store has the following responsibilities:

Holds application state;
Allows access to state via getState();
Allows state to be updated via dispatch(action);
Registers listeners via subscribe(listener);
Handles the unregistering of listeners via the function returned by subscribe(listener).

Sample project link

DEV Community: Nisha Gupta

React Native using Redux - An Intro

Actions

Reducers

Store