How to Implement React Global State With useContext

[00:00 - 00:17] implement global state. First, let's define a data structure for our application to make it available to all the components through React's context API. Inside of the SRC, create a new folder, state, and here create a new file, app, state, context, TSX.

[00:18 - 00:34] Here we'll import, create context, and use context methods from React. We'll use create context to define the app, state, context, and the use context hook to define a helper hook to access the context data easier.

[00:35 - 00:54] Define the types for the application state. Type task is going to be an object with fields ID, string, and text, also a string. So tasks will have IDs and text values. Then we'll define the lists type. List is an object. Each list will also have an ID of type string.

[00:55 - 01:06] It will have text. That's going to be the title of our list, string, and it will have an array of tasks. Tasks, it's a task array. And now let's define an expert, the upstate type.

[01:07 - 01:24] Expert type up state is an object with field lists. That is an array of type list. List array. The root type is upstate and it depends on list and task types. We use arrays to store the lists and the tasks.

[01:25 - 01:43] They will allow us to move the items around because arrays preserve the elements order. Both lists and tasks have unique IDs that will allow us to identify them. And also they both have the text field so that we will be able to render the text inside of the task and list components.

[01:44 - 02:03] I decided to go with the terms task and list for the date types. And for the components we will actually use other names so task will become a card and list will be represented by the column component. This way there should be less ambiguity. So if I'm mentioning a task then we're talking about the data. And if I'm mentioning a card then it's definitely a component.

[02:04 - 02:14] Now we have the types. Let's define the data. For now we'll just hard code it. Conced up data. We'll have type up state.

[02:15 - 02:42] And it's going to be an object with an array of lists lists array where we'll have objects representing tasks ID, zero, text, to do tasks. And it's going to be an array with one item that has ID, C zero, text, generate app scaffold. We will have three lists by default here to do in progress and done.

[02:43 - 03:08] And each of them will contain one task. Now let's define the context. First define the type for the context props type up state context props. It's an object that has an array of lists lists list array. And it will also have a method get tasks by list ID that receives an ID of type string and returns an array of task items.

[03:09 - 03:36] Define the upstate context itself. Conced up state context equals create context. And it is a generic type so we can pass the type of the value we're going to be passing through this context up state context props. And we will pass the default value here. Keep in mind that it will only be used if you don't wrap your application into the upstate provider. So we can omit it .

[03:37 - 04:00] To do this in TypeScript we pass an empty object and then cast it to up state context props. Now let's define the context provider. Expert, Conced up state provider. We're going to use the FC type here so that we can use the children prop here because the FC type defines the children on the props of your component.

[04:01 - 04:26] So we'll save some time by using FC instead of defining the children type on our upstate provider props ourselves. Now let's get the list from the up data Conced lists equals up data. Define the get tasks by list ID Conced get tasks by list ID equals a function that receives an ID of type string.

[04:27 - 04:52] And then returns the lists find here we find the list by comparing the list ID to the ID provided through the arguments. And if it exists, then we get the tasks. And as a fallback we'll have an empty array. Now let's return the layout return here will wrap the children into upstate context provider up state context provider.

[04:53 - 05:09] Inside of it we're under the children and then we pass the value. This value will be propagated through the whole react application or whole react sub tree that will wrap into this provider. But we will wrap the whole application to this provider so we can say that it will provide the value to the whole application.

[05:10 - 05:42] Now we'll pass the lists and the get tasks by list ID there and we can format the document. Now go to index TSX import upstate provider from state up state context and wrap the up into this provider. Now we'll be able to get the lists and the get tasks by list ID function from any component. Now let's create a simple hook that will make it easier to access the data from the context.

[05:43 - 06:07] Go back to upstate context and expert Conced use upstate that's going to be a custom hook where we return use context upstate context. So inside of this hook we get the value from the upstate context and just return it. We don't need to specify any types here because TypeScript can derive them automatically based on upstate context type.

[06:08 - 06:34] You can verify this by hovering use upstate and checking what is the return value here and it's upstate context props that we've defined right after the hard coded data. Now open SRC card update the props we will need ID of type string along with the text go to the column TSX add the ID string to the props here as well.

[06:35 - 07:08] Now we can get the input use upstate from state upstate context. Now inside of the column component body we can get the get tasks by list ID function Conced get tasks by list ID equals use upstate. Now we can get the tasks by using the column ID. This column ID is the same as list ID so Conced tasks equals get tasks by list ID and we pass in the ID.

[07:09 - 07:48] The ID comes from column props. Now instead of using hard coded card elements we can remove it and use a map tasks map. For each task we're going to return a card where text is going to be task text key is going to be task ID and ID also is going to be task ID. Now go to up TSX import use upstate from state upstate context get the lists Conced lists equals use upstate.

[07:49 - 08:17] Now instead of the hard coded column we can map through the lists list map for each list we're going to render a column where text is going to be list text key is going to be list ID and ID is going to be list ID as well. Now launch the app. Start. When you open the app you should see your columns with cards populated with the data inside of the hard coded upstate.