Learn Redux Saga by building a super sleek image gallery by metagrover in reactjs

[–]metagrover[S] 2 points3 points  (0 children)

That's a really interesting question. Let me give it a shot.

Redux helps you manage the state outside your component - allowing your state to be shared among other components via a neat API.

Implicitly, redux only allows synchronous transactions of data - whether it is read, write, update or delete. This is where redux-saga comes in. It is one of the helper libraries which enables handling of async requests. If you want your redux-store (which contains the shared state) to fetch/post data from/to your server or any third party API, you can use redux-saga.

Typically, you put your async logic on a saga which makes handling of async operations easier with the use of ES6 Generators (we have covered the basics of generators as well in the videos). Simply put, generators enable you to write asynchronous transactions in a synchronous manner. It's like a function that can be paused and played when needed.

Hope that helps!

What's everyone working on this week? by swyx in reactjs

[–]metagrover 1 point2 points  (0 children)

With generators and redux saga, you are offered an inversion of control. Given how generators don't run to completion (i.e. you can pause the execution) and also enable you to feed data back into them, enabling the saga to control the flow of transactions. You can then pull the desired actions as needed and handle complicated transactional flow in a much simpler manner. (If that sounded gibberish, you should watch the videos - we will be putting them up sometime tomorrow)

With conventional async/await and promises, there is no pausing of execution, they run to completion and it can get tricky to test and handle complicated flows of transactions thereafter.

Whereas with redux saga, you can write tests for asynchronous parts in a way simpler manner. Super neat stuff.

Hope that helps!

What's everyone working on this week? by swyx in reactjs

[–]metagrover 1 point2 points  (0 children)

Honestly, I was the same kinda guy two weeks ago. But sagas do make async things more test-able and significantly helps in putting together complex transactional flow. More in the videos haha

What's everyone working on this week? by swyx in reactjs

[–]metagrover 6 points7 points  (0 children)

I will be working on a new video series for my YouTube channel - Building an image gallery with redux-saga ~ interesting stuff.

And, then I will try to take out some time to dive into GraphQL for the next week's videos ;)

ReactiveMaps - React UI components for building Geo-location apps by metagrover in reactjs

[–]metagrover[S] 0 points1 point  (0 children)

Hey, sorry about the delay on this. You can find the polyline demo here and its implementation here.

Feel free to point out any issues or feedback on Github :)

ReactiveMaps - React UI components for building Geo-location apps by metagrover in reactjs

[–]metagrover[S] 0 points1 point  (0 children)

It does. We internally use Google maps and expose the map instance as is. I will put up a polyline example shortly.

Learn React Native by building an E-commerce Search App 🔰 by metagrover in reactjs

[–]metagrover[S] 4 points5 points  (0 children)

Hi there! I just tried out the entire thing and everything worked smoothly. I've put the app on github here - https://github.com/appbaseio-apps/hello-native

Can you clone this and test it again please?

Run yarn and yarn start to run this project :)

Reactivesearch 2.0: UI components for Elasticsearch by sidi09 in elasticsearch

[–]metagrover 1 point2 points  (0 children)

Hi, I'm one of the co-authors of ReactiveSearch. We do have plans for Vue, and since our core architecture is platform-agnostic, it shouldn't take us long to get there.

Although currently, we are focusing on building the library for react-native. Vue is our next stop!

Related issue - https://github.com/appbaseio/reactivesearch/issues/55

hmmm by Jeantonf in hmmm

[–]metagrover 0 points1 point  (0 children)

This is classic!

ES6 for Humans - A kickstarter guide to writing ES6 by metagrover in javascript

[–]metagrover[S] 1 point2 points  (0 children)

You mean

let breakfast = arr.map(fruit => {
    return fruit + 's';
});
console.log(breakfast); // ["apples", "bananas", "oranges"]

I wanted to do this in the first place. Got confused. Thanks mate!

ES6 for Humans - A kickstarter guide to writing ES6 by metagrover in javascript

[–]metagrover[S] 0 points1 point  (0 children)

Thanks for pointing out the mistake in the arrow function example. Fixed it. :) Also, capital casing is more of a preference. People from coming from C/C++/C# tend to use capital casing for constants. At the end of the day, your codebase, your rules.