Brief Explanation On Store, Action And Reducer Concepts Of Redux.
Hey nerds, let's discuss Store, Action And Reducer Concepts In Brief.
What's Redux?
>> It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.
>> As the application grows bigger and bigger it would be highly difficult to maintain the state of the entire app.
>> Redux helps us in solving this problem by using a global container called Store.
>> We can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.
>> Read Full Documentation here.
>> To install Redux Library with NPM and node.js installed use "npm install --save redux" in command line.
Core Concepts Of Redux
>> Redux is entirely formed with three concepts which are Store, Action, and Reducer.
>> Store - It holds the state of the application until an action required.
>> Action - This is nothing but the changes made to the state of the application.
>> Reducer - This is the response for any action which carries out the state transformation.
>> The state of the application is stored in an object tree within a single store.
>> By that it means, our application state is usually maintained in a single object which would be managed by the Redux store.
>> To update the state of our app, we need to let redux about that within an action.
>> We are not allowed to directly update the state object.
>> We need to write correct Reducers to context how the state tree is transformed by actions.
>> A Reducer is nothing but a function that takes previous state and Action as arguments and returns newState.
Here is the lifecycle of a JavaScript app with Redux.
Here is the lifecycle of a JavaScript app with Redux.
 |
| Store, Action, and Reducer(source Google) |
>> And this how a JavaScript app responds to the Redux lifecycle.
>> It has to dispatch an action to the Reducer.
>> State of the app cannot be changed directly.
Thank you for going through this article, hope it's worth your time.
Read also: Redux Tutorial
React vs Angular
JavaScript vs TypeScript
>> It has to dispatch an action to the Reducer.
>> State of the app cannot be changed directly.
Thank you for going through this article, hope it's worth your time.
Read also: Redux Tutorial
React vs Angular
JavaScript vs TypeScript
1 Comments
Excellent Blog! I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. Thanks for sharing. Great websites! I would like to add a little comment data analytics training in hyderabad
ReplyDelete