Reading: <Login /> and <Auth />
Review, Research, and Discussion
- Why is the Context API useful?
- The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to “prop drilling” or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
- Can a component outside of a provider get its context?
- Yes.
- What are some common use cases for using the Context API?
- Theming — Pass down app theme
- i18n — Pass down translation messages
- Authentication — Pass down current authenticated user
- Describe “Context Hell”
- Like the callback hell, usual when jQuery was used for everything, the React Context hell is the nasty code you get taking advantage of the React Context API.
- To clean up the nasty code you get from taking advantage of React Context API we need a way to nest multiple Context.Provider without passing them as children of each other.
Vocabulary
- global state
- global state management tool was something that React needed and with React 16.3 they introduced the context API. Context provides a way to pass data through the component tree without having to pass props down manually at every level, managing state in multiple components that are not directly connected. Enough talking about it. Let me show you with some code. Let’s create a simple app to demonstrate how to set up a store that gives us access to the global state anywhere in the app.
- global context
- Context provides a way to pass data through the component tree without having to pass props down manually at every level, managing state in multiple components that are not directly connected
<Provider>- Overview. The
<Provider>component makes the Redux store available to any nested components that need to access the Redux store. Since any React component in a React Redux app can be connected to the store, most applications will render a<Provider>at the top level, with the entire app’s component tree inside of it.
- Overview. The
- consumer
- A React component that subscribes to context changes. Using this component lets you subscribe to a context within a function component. Requires a function as a child. The function receives the current context value and returns a React node.
Preparation
- RBAC
- Role-based access control (RBAC) restricts network access based on a person’s role within an organization and has become one of the main methods for advanced access control. The roles in RBAC refer to the levels of access that employees have to the network.
- BENEFITS OF RBAC
- Managing and auditing network access is essential to information security. Access can and should be granted on a need-to-know basis. With hundreds or thousands of employees, security is more easily maintained by limiting unnecessary access to sensitive information based on each user’s established role within the organization.
- BEST PRACTICES FOR IMPLEMENTING RBAC
- Current Status.
- Current Roles.
- Write a Policy.
- Make Changes.
- Continually Adapt.
- react-cookies
-
Cookies are the data stored in the form of key-value pairs that are used to store information about the user on their computer by the websites that the users browse and use it to verify them. To set or remove the cookies, we are going to use a third-party dependency of react-cookie.
-
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 | |