How to style helperText in the TextField material-ui component

Oleksandr Sachuk — Fri, 20 Sep 2019 07:06:21 +0000

Add custom styles to the “material-ui” component may be a challenge sometimes.

For example, I need to add additional custom styles to the “TextField” component.

I tried different solutions and spent a lot of time to find the most simple one.

In the end, I found that it is a possible just pass “FormHelperTextProps” property with “className” key.

Hope, this solution saves you time!

Handle async actions by the RxJS and Redux-observable

Oleksandr Sachuk — Fri, 20 Sep 2019 06:34:59 +0000

Code example
RxJS operators

Code example

RxJS and Redux-observable are very useful to handle async actions.
I would like to show an example usage RxJS and Redux-observable in the react app.

First of all, we wait for some action in the ofType.

RxJS operators

Later we use switchMap operator.

I prefer to use switchMap which returns an ‘inner’ Observable and stops emitting items from the earlier-emitted inner Observable and begins emitting items from the new one.

For instance, if async action calls several times ‘switchMap’ cancel a subscription to the previous async action call and wait for the result of the latest one.

Inside “switchMap” you can get access to the action payload if it provided.

As mentioned previously “switchMap” returns an inner Observable, for instance, promise.

From the inner observable you create a separate pipe to handle async action result.

First of all, I would like to pay attention to the “startWith” operator to set pending action from the start.

For the success, handling I prefer to use “flatMap” which in general mining like a then in promises and catchError for the error handling.

Please, pay attention that all operators (startWith, flatMap and catchError) are inside “inner” Observable for handling async promise.

This is a very simple and easy way of reading to handle async actions.
And the latest thing, don’t forget to add an epic to the “combineEpics” from redux-observable.

DEV Community: Oleksandr Sachuk

How to style helperText in the TextField material-ui component

Handle async actions by the RxJS and Redux-observable

Table Of Contents

Code example

RxJS operators