3/11/2023 0 Comments React with redux![]() ![]() The state change is noticed by the component, which takes action to refresh, updating itself with the shiny list of users.Redux updates app state with the list of users it has been passed.The data handler then dispatches a Redux action with the API payload (e.g the list of users).The API fetches the data and returns its Promise to the data handler.The data handler calls the API using a GET request to something like '/users'.The React component calls the data handler to give it some data.The user clicks a button to load a list of users.With the introduction of a data handling mechanism, our new diagram looks like this:Īs you can see, we now have a much better spread of roles and responsibilities. and our component is handling too many responsibilities.We're going to potentially have a lot of duplicated code as our app grows,.This can introduce a few headaches which we outlined in part one of this series, but two of the biggest flaws for me are: The component is responsible for calling the API, updating state via Redux and then doing whatever the component is meant to be doing in the first place. In fact, this model is very component-centric. However, it's very closely tied to our component. This works fine and our app does what we set out to do: grab some users from an API and list them. You may remember that in part one, we had a diagram highlighting the different elements involved in fetching data, updating state and doing component things. Our data handler will act as an intermediary between our component, our API and the Redux dispatching of actions.įor those eager to explore the finished article before ploughing on, you can find the complete data handling project in a new Code Sandbox here. ![]() ![]() Here in part two, we're going to build on this idea and introduce the concept of a data handler. In React and Redux: components, API's and handlers Part I, we looked at how to add Redux to your React app and add in calls to an API via JavaScript's fetch(). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |