Our form is working out pretty well.
So now we need to really start to think about how we're going to actually assign a user up to our application.
In other words how we're going to make an actual sign up request and then once a user is signed in.
How are we going to actually share that signing information with all of our different screens.
So here's a quick example of what we're going to do.
So in this diagram I'm showing all the different components that we're going to have in just a moment.
So we've got all of our different screens down here.
All those different screens are being rendered or managed by some different navigation components coming
from react navigation.
So we're going to create a new component called off provider.
This is going to use the context system just like we saw in the last application to share some information
or data with all the different components inside of our app.
So for example if the track create screen right here wants to know whether or not the user is currently
signed in or maybe know what the user's ideas or anything like that we're going to allow the provider
to use the content system to share that information with that screen right now.
We need to kind of get a general idea of what state or information the auth provider is going to hold.
So for right now I think that maybe we will just assume that the auth provider is going to have some
property like is signed in to reflect whether or not the user is currently signed in.
We can then use that flag to decide when our application first starts up whether or not we should show
our users the sign up or sign in screens or all these other ones over here.
So let's get started working on this auth provider.
It's going to flip back over night editor inside of my source directory.
I'm going to make a new folder called context then inside of here we're going to once again create that
helper function to automate the process of creating a context and just setting up all those different
actions and all that kind of good stuff.
So on inside of context I can make a new file called create me do that once again create.
There we go.
Data context not J.S..
So once again inside of here we're going to export a function just to help us set up all this different
context stuff automatically rather than having to rewrite the same code again and again and again.
So everything we're gonna put inside of here we already wrote once before and we went over in great
detail in the last application we worked on.
So we're just gonna essentially rewrite the same code here.
So we're going to import react and use reducer from react.
Well then export default a function that's going to be called with a reducer function some actions object
and a default value or essentially our default state then inside of here we'll create our context as
react create context will then create our helper provider component so provider is going to be a react
component that's going to take some children as props then inside of here we're gonna set up our use
reducer call so we'll do const state and dispatch remember those are the two things anytime we call
user reducer and when we call use reducer we have to pass in our reducer function that's the function
with that switch statement and all those cases inside their and then the second value is going to be
our default state.
So that's gonna be a for us default value.
Then after that we're going to loop over all of our different actions inside that actions object.
Remember those are functions that we need to call each of those with our dispatch number dispatch is
a function that we can call with some action object and whenever we do react is gonna take that action
object and automatically send it off to the reducer for us so we're going to say bound actions and it
will loop over all of the actions that were passed in.
So let key in actions because actions is going to be an object so we're gonna use a for in loop to iterate
over all those key value pairs and we'll say bound actions at key will be actions at key so look up
each of these different action functions that are being passed in and call each one with our dispatch.
Then after that we will return context dot provider.
Remember this is the actual underline react component that makes all of our data available to all the
different components rendered underneath it.
We're going to pass in a value and remember this value prop. 8.
Here is the actual information that gets shared with all of our child components.
So instead of here we are putting our state just our entire state object in all these different bound
actions that we've now created
remember bound actions right here those are going to be the functions that we use to somehow change
our state then inside that context provider will show whatever child component was passed in as a prop
and then we'll close off context dot provider.
And then finally at the very bottom outside of our provider function.
So there's the closing curly brace for our provider function right outside of it we'll say return and
object and we'll put inside of your context is context and provider is provider.
And of course we can condense that down to just context.
And provider it's now provider right here is our component that's going to essentially make all of our
data available to everything else inside of application.
And context is the context object that we're going to use to get access to that information from one
of our child components.
All right.
Now that we've got this file put together we can now start to work on our actual context.
So inside of context once again I'll create a new file called off context dot J.S. so then inside of
here we're going to first require in the function we just created.
So create data context
will then create our reducer function.
So I'm going to call this thing off reducer.
Remember our reducer functions always get called with two arguments.
The first argument is going to be our state.
And the second will be the action.
So this function right here is going to be called only by react directly whenever we call that dispatch
function.
So from this function right here we have to return some new state value usually inside of reducer like
this.
Remember we put in a switch statement and switch over action dot type.
Now for right now we don't really know about the different types of actions we're going to have.
So we will only put in a default case in which case we'll just return our current state and not do anything
else then underneath that we're going to eventually define some of our different action functions.
Remember these are functions that are intended to somehow modify our state.
We also don't really know about what different functions we want to have yet.
So I'll just not write out any just yet.
And then finally at the very bottom we're going to take our reducer.
We're gonna take create data context and export the provider in context to be used throughout the rest
of our application.
So we'll say export content provider and context are coming from create data context we'll pass in our
three different arguments.
So first one's going to be a reducer which is off reducer.
The second is going to be our object with all of our different action functions.
Again we don't have any right now so I'll just put an empty object and then finally our initial state.
And like I just said in this diagram for right now we're going to just imagine that our initial state
is some object that has a is signed in property and by default a user will probably not be signed in.
So just by default have it be false it's all put in is signed in false.
Like so now I'll tell you right now.
Eventually we are not going to have the is signed in property.
There's actually some other properties we can track inside the state object that make a lot more sense
than just some simple flag like hey is the user signed in right now or not.
But I want to kind of lead you under into understanding why would we would use some of these other properties.
So again for right now we're just gonna assume that this is our only state property.
OK.
So there's our art context.
Now finally let's wire this thing up inside of our app dot J.S. file.
Remember we have to actually show that provider at the very top of our component hierarchy so that all
the information inside there can be shared with all of our different screens.
So I'll go back over to abduct J.S. inside of here after all of our different screens.
I'm going to import provider and remember if we want to we can optionally rename this variable right
here if we expect to have other contexts that we are importing into this file in this application.
I really really expect that we're going to have some different context things that we're going to import.
So going to rename this thing right away I'm going to call this first provider provider as off provider
from source context off context
and then finally from our app dot J.S. file if we go down to the very bottom rather than always exporting
the results of create app container right here.
We're going to instead a sign that to a variable that we'll call app like so and then instead we're
going to do a export default of our own custom component in inside of here we're going to return our
auth provider and inside there we're gonna show that app component.
So now by setting this stuff up right here we really have the hierarchy that we just saw inside of our
diagram at the very top is our auth provider.
And then underneath it is all that navigation stuff in all of our other screens that are being navigated
or Sammy shown in managed by that navigation stuff okay.
So Alex good case let's save this.
I'm going to flip back over just make sure I don't have any errors.
Looks like I'm all good to go.
So you have an error at this point.
That means that you definitely have a typo somewhere inside of your code.
Everything that we just added in is 100 percent independent of like any versioning issues around react
native or anything like that.
So if you're seeing an error right now definitely means that there's a typo somewhere inside of your
code.
So do a quick check and find where that thing is.
Now we've got this first.
First auth reducer setup and we've got some way to manage some states.
Let's take a quick pause.
When come back the next video we start to really think about the state values that are off providers
going to have.
How we're going to change them and how we're going to consume them inside of all of our different screens.