Redux Persist takes your Redux state object and saves it to persisted storage. Then on app launch it retrieves this persisted state and saves it back to redux.Notes:This guide is for v5 of redux-persist, which was released in October 2017.Parts of this guide were merged into the official docs via this pull request, which I submitted. However, this guide is still your best source for gaining an understanding of the library.Dependenciesnpm install –save redux-persist – OR – yarn add redux-persistImplementationWhen creating your redux store, pass your createStore function a persistReducer that wraps your app’s root reducer. Once your store is…
Author: drweb
Do you write React Native or JavaScript articles and want to be featured in our blog? Reach out to wyatt@reactnativecoach.com and we’ll review your submission.A bit late on this one but here are the highlights from the latest React Native release. Full release notes are available here.New space-evenly for justifyContent 👏🏻DatePickerIOS now takes a localeCameraRoll can now delete photosPlatformOS > PlatformYellowBox.ignoreWarnings([…]) > console.ignoredYellowBox = […]Note: We’ve had a hard time updating from 0.48 to 0.49 and above due to new API requirements that effects a lot of dependencies. Hoping this settles over the next couple of weeks.Another excellent article from…
Do you write React Native or JavaScript articles and want to be featured in our blog? Reach out to wyatt@reactnativecoach.com and we’ll review your submission.Great article on getting up and running with a TabNavigator using React Navigation from Ricky Peters.Many developers want to monetize their apps and one way to do that is through ads. This post from Hajji Tarik helps you get started with AdMob in React Native.Part 1 of a 2 part series on testing your React Native app from Emma Jamieson.Short and simple article on how to implement Native Modules from Shashank.Apply filters to images in your…
We’d also like to announce that we’re moving to a mostly bi-weekly schedule with React Native Coach. It’s a better pace while working on more projects ourself and better fits the content being produced in the space.If you’d like to contribute to React Native Coach be sure to drop me a line! wyatt@reactnativecoach.comReact Native 0.53React Native 0.53 was promoted to stable this week, the full release notes are available here, here are the highlights:Keyboard events now include duration and easingOn Android ScrollView now takes a snapToInterval and TextInput takes onKeyPress like IOSIncredible post from William Candillon on implementing Instagram style…
RxJs is the most challenging library of the Angular ecosystem because of its syntax, numerous operators, and the asynchronous mindset associated with Observables.Today, let’s see the easiest way to debug RxJs code in Angular. Now, you’ve probably done something like this at least once:service.getSomeObservable().subscribe(data => {console.log(data);});While the above works, it’s not ideal for a bunch of reasons:It forces you to subscribe to an Observable instead of using the async pipe, which is much better.It doesn’t allow you to debug what happens in that Observable before the subscriber receives the data.For instance, let’s say you inherit the following code to debug…
AI-generated image from the prompt “create signals out of observables”Signals are becoming increasingly an alternative to RxJs in Angular applications.Of course, there are the toSignal and toObservable functions to implement interoperability between Angular Signals and RxJs Observables, but what if we want to get more features than the basics?For instance, say we’d like to know if an Observable is still loading its initial data or if an error happened. Wouldn’t it be great to be able to do something like this?@if( myData.loading() ) {Loading data…} @else {{{ myData.data() }}}@if (myData.error()) {Something went wrong!}These three methods loading, data, and error, are…
A few years ago, I published a tutorial on how to do polling with RxJs and Angular. The goal was to illustrate how to retrieve and render information that gets refreshed periodically.With the latest iterations of Angular, we can simplify that approach a lot and implement a similar feature with less code, better performance, and no risk of memory leak!And we’ll be using Signals, too!First, let’s take a look at the 2020 version of my polling example:@Injectable()export class CurrencyService implements OnDestroy {private allCurrencies$: Observable;private stopPolling = new Subject();constructor(private http: HttpClient) {this.allCurrencies$ = timer(1, 3000).pipe(switchMap(() => http.get(‘http://localhost:8000/currencyInfo’)),retry(),tap(console.log),share(),takeUntil(this.stopPolling));}getAllCurrencies(): Observable {return this.allCurrencies$.pipe( tap(()…
A proxy forwarding an HTTP request to avoid CORS issues, as generated by AIIf you’ve ever encountered CORS errors in your Angular apps, this tutorial is for you!CORS stands for Cross-Origin Resource Sharing. It’s a security mechanism that allows web browsers to make controlled requests to resources on a domain different from the one serving the web page.This means if you’re serving your app on a domain “example.com” or “localhost” and your web app makes requests to “google.com” or some other domain, the web browser will make a preflight request (HTTP OPTIONS) to that other domain to ask if “example.com”…
Since version 16, Angular has been all about signals. I’ve covered how to create Signals from Observables to transition away from RxJs, but the Angular team introduced an even better option with Angular 19: The resource API.This API is experimental for now, as shown in the official documentation. This means it’s not recommended for production yet, but it’s such an exciting development that I had to write a tutorial on that topic anyway:Observables are used in many places in Angular, especially the HttpClient. Using Signals around these Observables, while doable, isn’t always obvious and brings a few extra challenges, such…
A few days ago, I was teaching Angular, and people asked me why I was doing this with my signals inside Angular services:readonly data = signal(‘value’).asReadonly();Why am I using read-only twice? Isn’t this redundant?First, let’s say I only do this:export class DataService {data = signal(‘value’).asReadonly();}Other components can inject that service, and the following is prevented, which is good if we want to ensure components can’t change the value of a Signal:export class AppComponent {data = inject(DataService).data;constructor() {// This doesn’t compile because our signal isn’t writabledata.set(“New value”);}But a developer could still break things and create all sorts of problems by doing…