简体   繁体   中英

How should I store isFetching/isLoading data in my redux store?

I am looking to create a generic way of storing isFetching for entities/data in redux. Currently I use normalizr and store all my entity data in an entities hash. For example

{
   people: { ... },
   orders: { ... }
}

I was thinking of defining a property on each entity (ie people, orders ...) object to specify whether or not data is being fetched. The only problem with this is if you do something like Object.keys you will return a list of ids + isFetching in your array. To overcome this I want to set the property to not being enumerable.

My data is fairly complex, I don't just have 2 entities, I have just simplified for the example. I am looking for a solution that can survive in my codebase in the long term.

Is this a good solution? I didn't want to create a new object just to store meta data (although this is a potential solution). Is there a better or more common approach?

I know this is slightly opinionated, but the redux issue guidelines pointed me to stackoverflow ...

Note I am aware of compatibility issues with Object.defineProperty. This is an internal application and everyone is on the latest version of chrome.

UPDATE

Potential implementation in the redux store

let initialState = {
  entities: {
    customers: null,
    orders: null
  }
};

Object.defineProperty(initialState.entities.customers, 
  'isFetching',
  {
    value: false,
    writable: true,
    enumerable: false
  });

Object.defineProperty(initialState.entities.orders, 
  'isFetching',
  {
    value: false,
    writable: true,
    enumerable: false
  });


export default initialState;

I think defining non-enumerable properties will make your code base harder to maintain, because the fact that a property is not enumerable, is hidden most of the time when debugging.

You could just follow the examples from normalizr and have meta data sit next to the entities . Eg:

{
  customers: {
    entities: {/** contains your normalized customer list*/},
    isFetching: false
  },
  orders: {
    entities: {/** contains your normalized order list*/},
    isFetching: false
  }
}

This would also allow for further extension of meta data in the future.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM