DEV Community: Atulit Anand

async actions in react-redux

Atulit Anand — Thu, 12 Aug 2021 11:50:41 +0000

Redux is a widely opinionated tool for state management. Although it's not exclusively made for react but it's praised by a lot of react developers.

Redux uses a big javascript object called the state tree to store and preserve the global state of the application.

Which we can access via dispatching actions to the reducer.

Reducer is a special function and in a higher-level language, I can say reducer is something that takes the original part of the state that it needs to work on and the action that you want it to do and gives away the result. Like a black box.

Now this is a very beautiful concept but you can not do something like this.

const reducer = async (state = initialState, action) => {
    let { users } = state;
    if (action.type === LOAD_USER) {
        const userData = await loadUser(...);
        users.push(userData)
        return { ...state, loading: true }
    }
}

To fetch and update state tree with async data, the traditional way is to use applyMiddleWare or some 3rd partly library like redux-thunk. But I won't be using that.

To bypass all the fuss we'll use a little trick.
Since react takes care of all the visual state of the application we just have to make sure that after our async function completes it should somehow tell redux that "yo! buddy I have done the thing that you asked for" and then redux can simply add/modify that information inside the global state tree.

And here is how we can do that.

Loading Async Data in reducer

This is a multi-step process

First we will pass an action to the reducer which will make an async call.
Then on the callback of that async action we will set up another dispatch that will be called after that async action completes.
In the meanwhile we can return that state of the tree with an isLoading label set to true from the original action.
The on-completion action will just return the state with the modified values and the loading label to false.

et voila.

Example Application.

In this application, I have used the same concept to load users asynchronously from jsonplaceholder. api.

You can check out the Github repo from here 👇

atulitanand / redux-users-app

REDUX for async tasks

You can manage async data in redux via two methods

Via 3rd party liberary like redux thunk
Unhealthy but simple way : Kind of a ruse

I am not using the second way because it adds additional compelexiy of the middle ware.

Main concept behind 2nd method

Since state of the application changes everytime the state tree changes. I can dispatch onCompletion action in the callbackasyncLoading action which is inside the reducer.

const reducer = (state = initialState, action) => {
    let { users } = state;
    if (action.type === DONE) {
        console.log('-updated-')
        return { ...state, loading: false}
    } else if (action.type === LOAD_USER) {
        loadUser(...).then((user) => {
            users.push(user)

…

View on GitHub

Live Demo

Thanks for reading.
Hope this may have added a little value, however small that may be.

Resources

Cover Image:
https://medium.com/swlh/handling-asynchronous-actions-with-redux-thunk-86b8d8e0b83e

This article by Robin Kim follows the redux-thunk middleware approach so it's my advice to check it out.

Thanks again! Have a lovely day.

Fluent Terminal Themes

Atulit Anand — Thu, 29 Jul 2021 15:23:34 +0000

Since the last couple of days I started using fluent terminal instead of my regular cmd shell. Which is pretty good by the way but fluent terminal is pretty dope because it offers something that all of us crave for.

Switching themes 🙂 ikr

For more info. about fluent terminal is general you can checkout this post by Robin Kretzschmar

Windows 10 FluentTerminal

Robin Kretzschmar ・ May 15 '19

#windows #terminal #productivity #wsl

I'm here to present you with collection of themes that you can use in the fluent terminal.

https://windowsterminalthemes.dev/ provides us with about 282+ themes more of less.
Yep that many.

You can get a json file with an array of all those themes easily on the internet but you can't use it directly unless you change that into the proper format in which fluent terminal asks its file to by. Couple of tweaks nothing much.

And to do that I present you with a little script that I wrote to extract out all those themes into a separate folder.
You can pull it down from my Github. Just run the index file and you're good to go.

atulitanand / fluent-terminal-theme-generator

Fluent Terminal Theme Generator

Steps to generate files

git clone https://github.com/atulitanand/fluent-terminal-theme-generator.git
cd ./fluent-terminal-theme-generator
node index.js

et voila.

View on GitHub

And finally my favourite CyberPunk2077.
I love a lot of themes but a combination of pink and purple make it look my a delicious cup of sundae.

If you wish to take a preview, visit windowsterminalthemes.dev.
Good luck with finding your precious delight.

Thanks for reading have a great day.

Implementing dev.to api

Atulit Anand — Tue, 01 Jun 2021 08:15:19 +0000

Hey everyone. It's an absolute pleasure to write something again.
Since the past couple of days I've been busy with my university exams (footnote: still not over 😐).
But I still managed to learn ReactJS and Java.

And here is what I made as my very first single page application.
Not technically but still it's something more then a frekin TODO app lol

Yep! A beautiful implementation of dev.to API.

It isn't my idea per say but this application is till not complete. This is just a branch of it.
I want to implement so much more in it after this. NO SPOILERS. Just stay tuned you won't be disappointed.

my experience

Since the very day I started to learn I knew about git bash. Still I just use to drag and drop my code everywhere. But while making this I thought of using it. I wanted to see how version control works. Well I'd say it is the best tool after vs code.

I also deployed it on AWS.But there are some issues in it. Idk why one of my stylesheet isn't loading.
What a pity Mr Jeff lol

AWS Deployment -- here

That should actually look like this.
And it must also include my search box.

Despite of that I also found out the topics that I don't know enough.
This project is more of less like stepping stones but the next version is going to be amazing. I can feel it.

You can checkout my repository here.

main
search-withoutportal - completed
searchbox - working on it

I learned a lot and I feel good about it.

I'm down for suggestions and hope you may like it.
I have also opened up some issues in the repositories. Feel free to check'em out and comment .
Other then that a special thanks to @mwrpwr for his article regarding dev.to API. Since this is my first API I wanted someone to show me how to use it and @coffeestasia for that amazing article on portfolio website. Because I will include full version of this app in my portfolio with proper styling n all.

Goodreads :)

Exploring DEV.to API

Joseph Maurer ・ May 28 '21 ・ 1 min read

#javascript #todayilearned #webdev #api

How to Build a Great Developer Portfolio (+ Examples & Tools)

Anastasia 🏄🏻‍♀️ for actiTIME Inc ・ May 26 '21 ・ 15 min read

#career #webdev #javascript #100daysofcode

Oh shoot did I forgot to mention.
I launched an npm package

reactrouter-parcel

which is nothing but my boilerplate for my react apps.
You can check it out here

It's amazing for beginners still I just think it's better than create react app.

And done! That's it for today.

Thanks for reading.
Have a beautiful day.😀

Day 24 - 29 and RIP of 100DaysOfCode

Atulit Anand — Mon, 10 May 2021 15:53:29 +0000

I started my first 100 days of code journey on 12 April 2021 and for the first 25 days, I did pretty well actually.

React was the hero for the first two weeks followed by react-router and flux but then a couple of days back, I broke my streak and since then I've been feeling pretty bad about it.

I don't wanna trick myself so I accepted my failure and I started a new 100 days of code challenge today.

But since I have faced a couple of setbacks, now I am familiar with what may happen and how can I improve.

Here is one more thing that I thought, rather than posting articles daily, which is actually great but sometimes it's overwhelming. I can share my journey with everyone after a couple of days or whenever I'll feel like I have something worth sharing.
And I made a Twitter account to share my journey. If anyone like to keep me in check pls do.

🌟Bonus: Follow this. Believe me, you will definitely thank me later.

These are the best places to get help because the community is pretty strong.

In the study group, you have rooms where you actually have to keep your desk cam on if you don't wanna get kicked out. It gives a class-like experience, just without a teachers.

There is a bot that keeps a check on all the present members and they have to post their hourly goals as well, if they don't wanna get kicked out.

They seem like worth sharing cause they have been pretty helpful for me.

Thanks for being here.
Hope I may finish this one. I will.

Have a wonderful day.😀

Check out the cool cover image right here.
It's an excellent laptop wallpaper for sure.

#21-23 of 100DaysOfCode

Atulit Anand — Tue, 04 May 2021 08:56:05 +0000

Another three days passed by,
Well, I am here to tell you what did I learned and how it all went.

The Highlights:

I learned how to make a virtual environment of python using
- pipenv
- venv
- virtualenv
What's the difference between them and how does it works.

But

I'm back to javascript i.e. node Till a couple of days back I was so determined to learn Django and then use React with it to create super optimized and secure web apps. But then again I don't have much experience with React or node and I want to make a strong foundation, So I started learning more about server-side stuff. How does the web work? Express.js You know the whole nine.

Those are just my first thoughts. Thanks for joining me.
Have a beautiful day.😀😀

Day #14-#20 of 100DaysOfCode

Atulit Anand — Sat, 01 May 2021 14:58:10 +0000

25 April to 1st May

Yepp, you got it right.
I'm back, as matter of fact I never broke my streak just ups and downs as usual.

While making the shopping cart app I realized that I need to learn React router in greater detail so I followed my gut that led me to start another course. Making apps with Flux and React.
Despite the fact that Flux is super cool to use, I learned that
the separation of concerns is a pretty big deal in the world of programming.

Flux is nothing but a simple library provided by Facebook to implement retrieving and loading of data effectively.
It's a sum total of four things

Action
Dispatcher
Store
React UI

They literally do the same task as their name suggests.

Anyway, that's not the main part, here the main thing is that we use flux in order to separate manipulation of data and rendering a component based on that data.
That's not it, we also separate our component into two parts

Dumb component
Smart component

A dumb component as the name suggests is dumb, i.e it contains the real markup (JSX) that is going to be rendered.

Whereas a smart component is a bridge that asks the Store for data via the Flux API and then pass it down to its dumb child so that it may render it.

And there you go separation of concerns at a whole new level.

I just wanna put it here that we don't need flux at all but it just provides us with an interface and since it's all about declarative programming why be a B about it.

With that said, now I'll work using these new tools that I just earned. 😁

I chose Django for the back end. I also installed ruby on rails on my computer as well but still meh.

I don't even know how to make a loop in ruby why to learn a new language when ruby on rails is just 0.7% faster than Django.

Although I could use some advice about which database I should learn first. Considering I have never even touched a soul till now.
I have installed PostgreSQL and Mongo on my pc but IDK, not sure.
See where it takes me.

If any one of you smart people would like to help me out, I'd really appreciate that.

That's how I spent my last couple of days.
Let me know if there is anything that I can do better in the comments or anything literally. Always happy to receive comments.

Thanks for joining me.😀
Have a wonderful day.🌷

#12, #13 of 100DaysOfCode

Atulit Anand — Fri, 23 Apr 2021 15:01:18 +0000

Working on a generic shopping cart app, nothing much to tell.

Have a nice day 🥀

#11 of 100DaysOfCode

Atulit Anand — Thu, 22 Apr 2021 16:05:21 +0000

Eleventh Day.
Today is all about routing.

List Of Things That I Learned Today

How to use React Router? Just a note: React Router is a beautiful third-party library that can be used to implement lightning-fast client-side routing on our react application. It's a beauty for real. Most of all you can declare patterns to get your routes and then we can just use the useParams hook to read the route.
Reading routes via use params.
Applying a 404 page: Nothing too serious just check if you have received the data, if not return markup for 404 page.
Implementing client-side navigation.
Redirecting using the useNavigate hook.
Link and NavLink components

  <Link to='/nameOfTheRoute' >
    <Element you want to show/> or Text
  </Link>

Link is just a smart cousin of anchor tag it just got to attribute instead of href plus it's smart.

  <NavLink 
    to='/nameOfTheRoute' 
    activeStyle={ObjectContainingStyles} 
  >
    <Element you want to show/> or Text
  </NavLink>

Link is smart but so is NavLink the only additional functionally it provides as you can see is activeStyle attribute and that is quite literal.
The additional styles that a nav link gets after we click on it.
Easy.

And that's all for today.😀
Thanks for joining me, comment down below if you got any suggestions.
Have a wonderful day.🌷

#10 of 100DaysOfCode

Atulit Anand — Wed, 21 Apr 2021 15:50:28 +0000

On the tenth day,
I just made two simple projects today and called it a day.
No biggie and no React.

It's seriously nothing but still if you wanna check it out.

Project 1 - Simple Price Grid

Code
Live view

Project 2 - Four Card Featured Application

Code
Live view

It's not enough, I know.
A big apology to myself and any other person who expected more.

If you got any suggestions, please comment down below.
Thanks for joining me.
Have a wonderful day.🌹

#9 Of 100DaysOfCode

Atulit Anand — Tue, 20 Apr 2021 16:05:50 +0000

In the continuation of my yesterday's topic, I studied more about state management in React and a couple of more topics.

Following are the new things that I learned today about React.

Synthetic Event handlers
Just like browsers React got its native event handlers too. But you may as why do we need'em? We already got our silly old toys to play with. But hold up,
- Synthetic event handlers provide improved performance and
- Cross Browser compatibility.
Then there was this thing about when React renders or re-renders?
So react renders when
- State changes - any of it and remember state must always be declared at the top of the scope.
- Prop changes
- Parent renders
- Context Changes As React is a declarative language so we rarely need any optimization but you still can control whether the state should render or not explicitly.

Here you can get more info about states.

#8 of 100DaysOfCode

Atulit Anand ・ Apr 19 '21 ・ 2 min read

#100daysofcode #react

useContext() useContext hook is a great tool and I learned something more about it .

useContext(callback, [dependency array])

Now we all know about the callback but the dependency array is the new cool thing
dependency array is a list of reasons that will make useEffect re-render or in layman's terms any states or props we will list in this array will make useEffect re-render every time they change.
The second definition is better, I know. lol

Handling Errors via Error Boundary This thing takes care of its child.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render your custom fallback UI for errors
      return (
                <h1>Heyyy!!! Glitch in the martrix.😲 
                    Sit tight we are coming...</h1>
      );
    }

    return this.props.children; 
  }
}

Code for making an error boundary class

And then you can just use it like a normal component. 😀

<ErrorBoundary>
  <App />
</ErrorBoundary>

Pretty cool right!!!

I know this looks familiar.
Here you can get this in a little more detail.

#7 of 100DaysOfCode

Atulit Anand ・ Apr 18 '21 ・ 2 min read

#react #100daysofcode #nextjs #javascript

But, It got limitations too.

The Error Boundaries ought to be classes
They can't catch certain types of errors:
- Errors in event handlers
- Errors in async code
- Errors in server sider rendering
- Error thrown in error boundary itself Also they are just concerned of the errors within their child elements.

A little tip

We can handle async errors with error boundries with a little bit of quick fix.
Plan:

Make a state that will store error and set it to null.
Catch error and set state equals to corresponding error.
Apply an if before rendering markup

if(error) throw error

and error boundary will take over.😎
LOL Nice.

That's it for today.😌
Thanks for joining me.
Have a wonderful day.🌷

#8 of 100DaysOfCode

Atulit Anand — Mon, 19 Apr 2021 14:28:32 +0000

Eighth Day,
Today I am revisiting react states in greater detail.

And here is what I have learned so far.

Eight ways to handle state in a React application

URL

Current app. location/settings.
Enables support for deep linking.
Avoids redundantly storage of data in your beautiful app.
3rd Party Enhancement - React router

Web Storage

To persist states between reloads.
- Cookies
- Locale
- IndexedDB
⚠ Watchout !!!
- Tied to a single browser - i.e. If the same app. will be accessed from a different browser then you have to again store all the data. (we all are familiar with cookies, right!)
- Avoid storing sensitive data.
Use Cases
- Items in a shopping cart.
- Partially filled form data.

Local State

Store state inside a React component. (used when a component needs it)
Use Cases
- Forms
- Toggles
- Local lists

Lifted State

It's literally what its name says. When a state is used by multiple components then we just lift a state to common parent and pass'em down via props.

Derived State

Derive state from existing states/ props.
Example: Like using Array.length rather than assigning a length of the list to a new state variable.
That was a simple example but what derived states?
- Not because it makes code "slick" but to simplify code and avoid sync bugs.

Refs

The DOM reference
- For uncontrolled elements like inputs and other components where React don't control their properties
- Interfacing with non-react libraries.
State that isn't displayed
- Like to track if a component is mounted or not.
- Hold timers.
- Store previous state values (Helps in making features like undo and redo)

Context

#7 of 100DaysOfCode

Atulit Anand ・ Apr 18 '21 ・ 2 min read

#react #100daysofcode #nextjs #javascript

Yep, the same thing that I mentioned the day before.
Global/ broadly used state and functions.
- Avoids prop drilling
Use Cases:
- Login key of the user.
- Authorization settings.
- Theming
- Internationalization settings

Third Parth States

Handling state via third parties to make life chill.
General Options:
- Redux
- Motex
- Recoil
Remote State:
- SWR
- Relay ---|--Both of them goes well with GraphQL
- Apollo --|

Yep and that's all for today.
I wasn't able to do enough today but I am working on it.

I'm sure most of you guys have used them before and this is just a general classification of possible use cases but since we are developers, innovation is in our middle name.😄
You know what I'm saying.

If anyone wants to suggest some more use cases or any add on's or if there are some mistakes in the post, please let me know.
I'll really appreciate that.

Thanks for reading it.😊
Have a beautiful day.🌷

#7 of 100DaysOfCode

Atulit Anand — Sun, 18 Apr 2021 14:25:29 +0000

Seventh Day,
😄 Today I learned some really nice features that React provides and I learned how to include Tailwind CSS in a Next.js application.

Anyway here are my today's learnings:

Render props method In the continuation of the HOC that I learned yesterday, today I learned more about the render prop method that can be used to optimize our code.
- It's a pretty long concept so here is a gist: A component with a render prop takes a function that returns a React element and calls it instead of implementing its own rendering logic.
- In layman's terms Think of render props as a component that surrounds our existing component and provides our existing component property and values it can use.
Context and useContext() hooks
- This API was designed to share data across the multiple layers of child components without using props drilling.
- This API contains a Provider to which we can pass a value that can be accessed by all its child components.
- we also need a reference to this Context that we created that we need to pass in useContext() as an argument to access the values given to the provider.
Components styling
- I haven't used it by myself at all till now but I learned how to include Tailwind CSS in a Next js project.
I learned about "dev dependencies" inside the package.json file.
@apply directive offered by Tailwind CSS to combine lots of different small classes to make a big usable class.

You can check out HOC (Higher Order Components) in my yesterday's post if you wanna know more.😄

#6 of 100DaysOfCode

Atulit Anand ・ Apr 17 '21

#100daysofcode #javascript #react

If anyone would like to suggest me something since I'm new to React and Next.js or if there are some mistakes in the post, please let me know.
I'll really appreciate that.

Thanks for reading it.😊
Have a beautiful day.🌼