Access and Changing global state properties inside a reducer in react

Question

I want to have just one loader (backdrop and spinner) inside app component and show it when i need (depends on redux state's property called showLoader) in every where of my react application. So I have a global reducer called appReducer which is contains showLoader property. the question is how can i change showLoader inside another reducer, orderReducer when i need?

for example when dispatch FETCH_ORDERS_REQUEST action, showLoader should be true and after that when FETCH_ORDERS_SUCCESS action dispatched, showLoader should be false. How can i do that? Thank you

write custom middleware which will be triggered by a list of your action types — demkovych, Jul 01 '20 at 10:08
@demkovych no, i'm inside of microsoft share point and i use it's api which is a promise. — Amirhossein Payon, Jul 01 '20 at 10:10
dig into documentation https://redux.js.org/advanced/middleware — demkovych, Jul 01 '20 at 10:13
it should help you solve your problem [Check this out](https://stackoverflow.com/a/42257050/9758658) — bobbylemm, Jul 01 '20 at 10:13
why can't you handle FETCH_ORDERS_REQUEST from appReducer too? unless i didnt understand the problem correctly sorry for that. — Apostolos, Jul 01 '20 at 10:13

score 0 · Answer 1 · answered Jul 01 '20 at 10:16

Just use multiple action types in global reducer:

switch (type) {
  case FETCH_ORDERS_REQUEST:
  case OTHER_REQUEST:
    return {
      loading: true
    }
  case FETCH_ORDERS_REQUEST_SUCCESS:
  case OTHER_REQUEST_SUCCESS:
    return {
      loading: false
    }

}

Access and Changing global state properties inside a reducer in react

1 Answers1