Immutable action.payload in React Native Redux

Viewed 269

I fetch a product list from the server in my RN-app. It's an array of objects:

[{
    "id": 1, 
    "title": "product1", 
    "img": "img1.png", 
    "text": "lorem ipsum 1"
}, 
{
    "id": 2, 
    "title": "product2", 
    "img": "img2.png", 
    "text": "lorem ipsum 2"
}]

I fetch data in this way:

export function fetchProducts() {
  return (dispatch: Function) => {
    return apiClient
      .get("products/")
      .then(response => {
        dispatch(fetchProductsSuccess(response.data));
      })
      .catch(error => {
        showErrorMessage(FETCH_CATALOGUE_FAIL_MESSAGE);
        dispatch(fetchProductsFail());
      });
  };
}

I've written this case in my Reducer:

case FETCH_PRODUCTS_SUCCESS:
  return {
    ...state,
    appState: {
      ...state.appState,
      isCommentsLoadingFinished: true
    },
    domainData: { ...state.domainData, products: action.products }
  };

My problem is that I can't understand that the action.products payload violates the 'immutable reducer' principle or not. I'm not sure that my response.data can't be updated anywhere except my reducer. So, it will violate the 'immutable reducer' principle in this case.

Please, tell me can I violate the 'immutable reducer' principle or not in this case. And, if it violates, how should I do? Thank you in advance)

1 Answers

It doesn't. Since you are just setting the products to action.products which is a brand new object that s coming from fetch.

It would happen if you updated redux state directly at any place of your app.

Related