React with Mobx and TypeScript course introduction

Using MobX to Isolate a React Component State

 Understand and Control Mutations with MobX Dev Tools and @action in React

Optimize Performance in a React App with MobX @computed Properties

Maintainable Application State React Class Pattern using MobX

Creating Reusable State Class Driven React Components

Test a React Applications using MobX with Jest

Develop React Applications with Mobx and TypeScript

The state class pattern can easily be expanded to allow you to create component-ui / component-state pairs that provide reuseable functionality for your applications. 

In this lesson we look at an example of creating a reuseable input component. 

We also mention a re-useable form state management library that uses the state class pattern. 

https://app.egghead.io/api/v1/lessons/react-creating-reusable-state-class-driven-react-components/subtitles

Instructor: [00:00] We start off with the simple list application from the previous lesson. You can add items to the list and reset the list if you want. Now, looking at the app, it could be great if you had a reusable input component.

[00:18] Similarly, if you look at application state, it could be great if you could create a reusable field state instead of having to create two things. You create a new file field.tsx to contain these two reusable pieces of information.

[00:39] You bring in the usual React observable and action from MobX and observer from Mobx React. We can refactor the reusable portion of the state into a nice class called field state that has the value and the onChange action to change the value.

[01:03] Similarly, we can refactor the rendering of the field state into a reusable field input component that takes the field state as a prop and wires it into a browser native input element. In our application state, instead of these two pieces of information, we have a single field state. Now, we simply carry out the refactoring required as courteously pointed out by TypeScript.

[01:58] This already results in a few less lines and less lines of isolatable logic into our application code. Similarly, in app.tsx, we get to use our field input and simply wire it to the current item in the application state.

[02:29] As you can see, the application still works as expected. Note that, if you wanted, we could easily share this reusable logic of field state maintenance. Next ideas to include in such a class would be adding validation and error maintenance along with the ability to compose field states into a nice cohesive form state.

[02:56] This is exactly what the library form state does. You bring it in from npm and just use that instead of our custom rolled field state. We wire our input to use that generic field state and initialize the current item in app state to also use the same field state.

[03:32] Note that, having the ability to author our own field input allows us to design an input that matches our requirements. We get to define our own design without having to worry about the core logic of field state management and validation.

[03:58] There is, of course much more to the form state library. However, the focus here was simply to demonstrate the reusability of state classes with state class prop components.

Creating Reusable State Class Driven React Components

Share this video with your friends

Course

Develop React Applications with Mobx and TypeScript