applyMiddleware, to be able to use middleware, in this case thunk.createStore, to create the store that will maintain the Redux state.In index.js, we'll be bringing in a few things. Even so, there will be some opinionated aspects because Redux is very flexible. There are plenty of tutorials out there that show you how to get a very basic Redux store with todos set up, but I don't find that very useful for knowing how to make a production level setup, so I'm going to set it up with everything you need from the get-go. After looking at a lot of the more up-to-date apps and taking the aspects that were common across all of them, I got a good feel for what should really be in a Redux app, and what is just people moving things around to be unique. When I first started learning Redux, it seemed so overwhelming because every app I looked at had index.js set up a bit differently. Now we have enough boilerplate to get started, so we'll begin working on the entrypoint. I intend only to go over functionality and not anything about style, so I just wrote some very basic styles to ensure the site looks decent enough. The payload is additional data that may be passed.įor the index.css file, just take the contents of this gist and paste it. The type is generally an uppercase string (assigned to a constant) that describes the action. An action is conventionally an object with two properties: type and (optional) payload. ActionsĪn action sends data from your application to the Redux store. I'll just use the typical todo application, and the action of deleting a todo, for the examples. Although you can skip to the beginning of the tutorial section, I think it would be good to read through all the definitions just to get exposure and an idea of them in your head first. Usually I don't like to just make a list of terms and definitions, but Redux has a few that are likely unfamiliar, so I'm just going to define them all up front to make it easy to refer back to them. In my personal experience, I set up an application with Context alone, and later needed to convert everything over to Redux to make it more maintainable and organized. A smaller application may not need Redux and may instead benefit from simply using the Context API for global state needs. The downside to Redux is that there's a lot of initial boilerplate to set up and maintain (especially if you use plain Redux without Redux Toolkit). The fact that the entire state of the application is tracked with each change means you can easily do time-travel debugging to move back and forth between changes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |