When make use of redux state?
Over time, the development of the front-end app made the application larger due to the amount of API calls that the application uses. So Redux is used to share application data and state.
With the new redux-toolkit, a lot of boilerplate code has been removed. No need for action creators, mapping of reducers, props and states.
- Everytime a new API endpoint is available for the web app:
- Create a new xxApiSlice by injection using
userApiSlice
. Check out the other slices such asbotApiSlice
- Create a new xxApiSlice by injection using
- If application state is neede (which with react-toolkit it is not anymore)
- Create a xxAppSlice. Checkout
botSlice
- Create a xxAppSlice. Checkout
However, because some operations require quick readonly data that needs to be up to date, in some situations it’s not worth doing all above steps and writing so much code for data that doesn’t even change, so some components may have a requests.js
, which is where we simply make calls to API endpoints and get the json.
How to debug redux state in this app
Find the API endpoint called
- In the component find the props that return the data e.g.
this.props.balance
- Find the name of the reducer in the
mapStateToProps
function e.g.state.balanceReducer
- Find this constant in the saga e.g.
watchGbpBalanceApi
- In the generator function e.g.
getBalanceAll
you will find therequestUrl
- This URL will have a constant variable which is usually located in the
env