Communicate with Redux & Redux-Saga 🪄
Tags: react, redux, javascript, developer
Published: 2021-02-15 02:38:39

Greetings Reader,🙏

This blog will discover the process of communication with **redux store** in React


> Every developer maintain code in a different approach 

My approach: Folder structure 📂  for this tree folders are common like - **models, services, pages**


**1. Models** 

```
const customerModel = {
  namespace: 'customer',
};

export default customerModel;

```

Providing **namespace** will be unique all over the **store** and easy to remember and call its *effects* & *reducers*.

let's create a state of the customer model - 

```
const customerModel = {
  namespace: 'customer',
  state:{
    customerList: [],
    singleCustomer: {},
  }
};

```

in the above `state`, the object will handle the response from `Rest API` also updates from customer components if any change happens. 

let's understand how to connect with Rest API and push the response in the `customerList` array. for this will create a `effects` object which will contain the `generator` functions. read more about  [generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) 

-----------
`redux-saga` provides some helper effects wrapping internal functions to spawn tasks when some specific actions are dispatched to the Store.


`effects` - 

```
  effects: {
    // * indicate its generator fun
    *setState({ payload }, { put }) {
      if (payload) {
        yield put({
          type: 'save',
          payload,
        });
      }
    },

```
`setState` is very common fun for calling multiple occurrences like user action, updating a value in the state, etc. we got two params - 
 - `{ payload }` -  whatever value you would like to update in the state.
 - `{ put }` - is a special helper function of redux-saga. It takes two params - 1. `type` name of reducer (`save`), 2. payload which needs to update in-store, payload we will understand in the component section.  read more about [helper](https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html) 

- `yield` -  will return the call of `put` which is connecting to the reducers `save`. The `save` function we will declare in the below code in the section of the reducer object.


------------
`reducers` - 

```
 reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload
      };
    },
  },

```
in the reducers function, you can put the logic to maintain the state of the application but currently, we are just taking the previous state of it and merging with the new state if any changes.

But in the top, we were about to get the response of customer list in put inside the `customerList` array


example: - Let's create a generator function & define logic as in setState fun.

```
*getCustomers({ payload }, { call, put }) {
      try {
        // api call -
        const response = yield call(customerListAPI, payload); 
        if (response.success) {
         // customerList key specified to store only in that array value. 
          yield put({
            type: 'save',
            payload: {
               customerList: response.data,
            }, 
          });
        }
      } catch (error) {
        console.error('error in customer list api', error);
      }
},

```
Explain -  we wrapped the API call because we calling the *promise* function with the help of the `call` effect.
- `call`  -required two params - i) *callback* function, ii) *payload* - if we need any required data to be passed to the callback function, in simple word API requirement likes customer id, etc.  
- `yield` has control over the sequence in getting a response from API call. 
- `try-catch` helps the control of the function of we get any error in resolving the promise the catch will prompt us in the console.


**2. Services** 

The services folder will contain the related API functions & common required key values.

```

import { Access, Secret, ApiURL } from '@/utils/env';
import request from 'umi-request'; 
// axios also can be used here if you are comfirtable with `umi-request`

const headers = {
  'Content-Type': 'application/json',
  'access': Access,
  'secret': Secret,
};

export async function customerListAPI(params) {
  return request(`${ApiURL}/v1/getcustomerlist`, {
    headers,
    method: 'GET',
  });
}

// other async functions ....
export async function customerByID(params) {
 ....
 ....
 ...
}


```

**3. Page or components**

Now the finally we have to call the model to get the data from API.
What is UMI and understand how to connect works check out my  [article](https://www.rjlooper.me/how-to-use-ant-design-theme-style-customize-components-in-an-easy-way-solutions)  

```

import { connect } from 'umi';

const CustomerList = (props) => {
  const { dispatch, customer } = props;
  const { customerList } = customer;
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'customer/getCustomers',
        payload: {
          size: 10,
          page: 1,
        },
      });
    }
  }, []);

  return (
    <CommonTable
      source={ customerList }
    >
    ....
    </CommonTable>
  );
};
// to connec with redux store
export default connect(({ customer }) => ({
  customer,
}))(CustomerList);


```



> Congratulation you made it. 🏆

I hope you enjoyed, learned, and remember...🙌


> If you liked it please leave some 💙 & 👍 to show your support. Also, leave your responses below and reach out to me if you face any issues.

You can find me on Twitter [rkumar1904](https://twitter.com/rkumar1904) & follow my developer journey ✌️

ThankYou.