Understand and Implement your own Redux

buttercms.com buttercms.com2 years ago in #Dev Love80

What is Redux and why should you care about it?What is a Store?What are Actions/Action creators?What are Reducers?How does data flow in a Redux application?Writing our own Redux libraryImplement a small application using our ReduxConclusion Discover the basic concepts of Redux and learn about Actions, Reducers, and a Store in Redux. In addition, we’ll also build our own version of Redux using vanilla JavaScript and use it in an application. Our version of Redux will neither be production-ready nor have all the features and optimizations of Redux. However, it’ll help us understand how Redux works under the hood. What is Redux and why should you care about it? Redux is one of the most popular Javascript State Management Libraries and mostly used with React, though it can be used with any other library or framework.  In an application, a state is like a global object which keeps a snapshot of the application’s data at that instance. If you want to trigger updates on separate components based on some action that the user performs, Redux makes it very easy with a function called a Store. It’s a JavaScript object which keeps track of the whole application’s data. What is a Store?A Store is an object which keeps track of the state of the whole application. In a Redux application, you can have only one store. The state of the store can be updated by dispatching an Action (more on that later). The latest state of the store can be accessed by using the getState() function. If you want to segregate the store of one part of the application from another, you can split your different Reducers. Your application can subscribe to the store in order to stay updated.What are Actions/Action creators? An Action is the only way through which the store is updated. Generally, a payload is sent along with a type property while dispatching an action. Type is the only mandatory property that you’ll have to send while dispatching an action. You can also send other properties as required to update your store. Actions don’t have any logic regarding how to update the store. What are Reducers? Reducers specify how the state of the store changes based on the actions dispatched by our application. Reducers contain the logic regarding how to update the store. The data is provided by the actions dispatched. How does data flow in a Redux application? Redux follows a strict unidirectional data flow. This ensures a single copy of your application’s state ensuring that all parts of your application are in sync with the state of the store. The data flow in a Redux application starts when an action is dispatched using store.dispatch(). Redux then tries to match the type property of the action with its reducers. Since a reducer is a pure function, it computes the next predictable state. Based on how you’ve structured your reducers, the root reducer may combine the output of multiple reducers into a single state tree. The final step of the data flow is updating the store with state tree returned by the root reducer. This is the next state of your application. Sign up to receive tutorials on Redux. Writing our own Redux library In this part, you will be learning about how you can build your own Redux library using vanilla JavaScript. The source code is available on Github.You need to create only one function called createStore. CreateStore will take two arguments: reducer – This is just a function that will be responsible for updating the store.initialState – This is the state object with which your store will be…

Like to keep reading?

This article first appeared on buttercms.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply