Reading: Application State with Redux
Review, Research, and Discussion
- What are the advantages of storing tokens in “Cookies” vs “Local Storage” ?
- Local Storage - Pros: It’s convenient. - It’s pure JavaScript and it’s convenient. If you don’t have a back-end and you’re relying on a third-party API, you can’t always ask them to set a specific cookie for your site. - Works with APIs that require you to put your access token in the header like this: Authorization Bearer ${access_token}. - Cons: It’s vulnerable to XSS attacks. - An XSS attack happens when an attacker can run JavaScript on your website. This means that the attacker can just take the access token that you stored in your localStorage. - An XSS attack can happen from a third-party JavaScript code included in your website, like React, Vue, jQuery, Google Analytics, etc. It’s almost impossible not to include any third-party libraries in your site.
- Cookies - Pros: The cookie is not accessible via JavaScript; hence, it is not as vulnerable to XSS attacks as localStorage. - If you’re using httpOnly and secure cookies, that means your cookies cannot be accessed using JavaScript. This means, even if an attacker can run JS on your site, they can’t read your access token from the cookie. - It’s automatically sent in every HTTP request to your server. - Cons: Depending on the use case, you might not be able to store your tokens in the cookies. - Cookies have a size limit of 4KB. Therefore, if you’re using a big JWT Token, storing in the cookie is not an option. - There are scenarios where you can’t share cookies with your API server or the API requires you to put the access token in the Authorization header. In this case, you won’t be able to use cookies to store your tokens.
-
For further information clicks => here
-
Explain 3rd party cookies.
- Third-party cookies are cookies that are set by a website other than the one you are currently on. For example, you can have a “Like” button on your website which will store a cookie on a visitor’s computer, that cookie can later be accessed by Facebook to identify visitors and see which websites they visited.
- How do pixel tags work?
- Pixel tags are typically single pixel, transparent GIF images that are added to a web page. Even though the pixel tag is virtually invisible, it is still served just like any other image you may see online.
Vocabulary
- cookies
- Cookies are files created by sites you visit. They make your online experience easier by saving browsing information. With cookies, sites can: Keep you signed in. Remember your site preferences.
- authorization
- Authorization in system security is the process of giving the user permission to access a specific resource or function. This term is often used interchangeably with access control or client privilege.
- access control
- Access control is a fundamental component of data security that dictates who’s allowed to access and use company information and resources. Through authentication and authorization, access control policies make sure users are who they say they are and that they have appropriate access to company data.
- conditional rendering
- In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.
Preparation
- Redux
- Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark.
- Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test.
- While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It’s lightweight at 2KB (including dependencies), so you don’t have to worry about it making your application’s asset size bigger.
- With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store.
- Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming; but that depends upon the architecture decisions.
-
State management is essentially a way to facilitate communication and sharing of data across components. It creates a tangible data structure to represent the state of your app that you can read from and write to. That way, you can see otherwise invisible states while you’re working with them.
-
The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another.
-
There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it’s to be used. We’ll be implementing a similar example to the login component above but this time in Redux.
-
For further information clicks =>here OR here
| Read | Title | ToGo |
|---|---|---|
| Read: 01 | Pre-Work - Code 401: Advanced Javascript Development |  |
| Read: 02 | Readings: Express | |
| Read: 03 | Readings: Express REST API | |
| Read: 04 | Readings: Data Modeling | |
| Read: 06 | Readings: Authentication | |
| Read: 07 | Reading: Bearer Authorization | |
| Read: 08 | Reading: Access Control (ACL) | |
| Read: 09 | Reading: OAuth 2 | |
| Read: 11 | Readings: Event Driven Applications | |
| Read: 12 | Readings: Socket.io | |
| Read: 13 | Readings: Message Queues | |
| Read: 14 | Readings: Event Driven Architecture | |
| Read: 16 | Readings: AWS: Cloud Servers | |
| Read: 17 | Readings: AWS: S3 and Lambda | |
| Read: 18 | Readings: AWS: API, Dynamo and Lambda | |
| Read: 18 | Readings: AWS: Events | |
| Read: 26 | Reading: Component Based UI | |
| Read: 27 | Reading: Props and State | |
| Read: 28 | Readings: Component Composition | |
| Read: 29 | Readings: Routing | |
| Read: 31 | Reading: Hooks API | |
| Read: 32 | Reading: Custom Hooks | |
| Read: 33 | Reading: Context API | |
| Read: 34 | Reading: <Login /> and <Auth /> |
|
| Read: 36 | Reading: Application State with Redux | |
| Read: 37 | Readings: Redux - Combined Reducers | |
| Read: 38 | Readings: Redux - Asynchronous Actions | |
| Read: 39 | Readings: Redux - Additional Topics | |