Forem: Ruben Gabrielyan

Stop Writing JavaScript Like This

Ruben Gabrielyan — Thu, 14 Oct 2021 14:53:16 +0000

Most of us are used to writing JavaScript code for a long time. But we might not have updated ourselves with new features which can solve your issues with minimal code. These techniques can help you write clean and optimized JavaScript Code. Today, I’ll be summarizing some optimized JavaScript code snippets which can help you develop your skills.

1. Shorthand for if with multiple || conditions

if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
    //code
}

Instead of using multiple || (OR) conditions, we can use an array with the values and use the includes() method.

if (['apple', 'orange', 'banana', 'grapes'].includes(fruit)) {
   //code
}

2. Shorthand for if with multiple && conditions

if(obj && obj.address && obj.address.postalCode) {
    console.log(obj.address.postalCode)
}

Use optional chaining (?.) to replace this snippet.

console.log(obj?.address?.postalCode);

3. Shorthand for null, undefined, and empty if checks

if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

Instead of writing so many checks, we can write it better this way using ||
(OR) operator.

const second = first || '';

4. Shorthand for switch case

switch (number) {
  case 1:
     return 'one';
  case 2:
     return 'two';
  default:
     return;
}

Use a map/ object to write it in a cleaner way.

const data = {
  1: 'one',
  2: 'two'
};
//Access it using
data[num]

5. Shorthand for functions with a single line

function doubleOf(value) {
  return 2 * value;
}

Use the arrow function to shorten it.

const doubleOf = (value) => 2 * value

Buy me a coffee

How To Setup Redux with Redux Toolkit

Ruben Gabrielyan — Tue, 22 Jun 2021 13:13:21 +0000

Developing modern web applications involves not only UI building but also state management. One of the most widespread libraries for this is Redux. In this tutorial you will learn how to setup Redux using latest libraries and techniques available in 2020 and Redux Toolkit which will simplify your logic and ensure that your setup has good defaults.

Why to choose Redux Toolkit

Redux is a good fundament for the opening but to simplify working it is recommended to use the Redux Toolkit. It was created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

It has functions that build according to Redux best practices . It includes several utility functions that simplify the most common Redux use cases, including store setup, defining reducers, immutable update logic with Immer, and even allows creating entire "slices" of state at once without need to write action creators.

It comes as preconfigured bundle of the most widely used Redux addons, like Redux Thunk for async logic and Reselect for writing selector functions, so that you can use them right away. It also allows your to overwrite all of its settings, for example its very easy to use redux-saga or any other middleware with it.

How to setup Create-React-App With Redux

For this redux tutorial lets start with setup new react application with CRA:

npm install -g create-react-app
create-react-app redux-tutorial
cd redux-tutorial

Next we will add redux with:

npm install --save react-redux @reduxjs/toolkit

Firstly configure store. Create file src/store/index.js containing:

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'
const reducer = combineReducers({
  // here we will be adding reducers
})
const store = configureStore({
  reducer,
})
export default store;

configureStore accepts a single object rather that multiple function arguments. It's because under the hood, the store has been configured to allow using the Redux DevTools Extension and has had some Redux middleware included by default.

Then we need to connect our store to the React application. Import it into index.js like this:

...
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Provider wraps the App and the whole application has access to Redux. If you start your application with npm start and open Redux Dev Tools you should see @@INIT. Congratulations you have setup redux!

How To Structure Your Redux

Lets now setup Redux authentication and implement simple login form and logout button shown after authentication. Redux itself does not care about how your application's folders and files are structured. However, co-locating logic for a given feature in one place typically makes it easier to maintain that code. Redux.org recommend that most applications should structure files using a "feature folder" approach (all files for a feature in the same folder) or the "ducks" pattern (all Redux logic for a feature in a single file), rather than splitting logic across separate folders by "type" of code (reducers, actions, etc).

Lets add src/store/user.js store slice:

import { createSlice } from '@reduxjs/toolkit'
// Slice
const slice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    loginSuccess: (state, action) => {
      state.user = action.payload;
    },
    logoutSuccess: (state, action) =>  {
      state.user = null;
    },
  },
});
export default slice.reducer
// Actions
const { loginSuccess, logoutSuccess } = slice.actions
export const login = ({ username, password }) => async dispatch => {
  try {
    // const res = await api.post('/api/auth/login/', { username, password })
    dispatch(loginSuccess({username}));
  } catch (e) {
    return console.error(e.message);
  }
}
export const logout = () => async dispatch => {
  try {
    // const res = await api.post('/api/auth/logout/')
    return dispatch(logoutSuccess())
  } catch (e) {
    return console.error(e.message);
  }
}

The store feature file contains createSlice that returns a "slice" object that contains the generated reducer function as a field named reducer, and the generated action creators inside an object called actions.

At the bottom we can import the action creators and export them directly or use them within async actions, like login and logout.

To connect reducer into Redux, we have add add it to the main reducer in store/index.js:

...
import user from './user'
const reducer = combineReducers({
  user,
})

Connecting Redux to Components with useDispatch and useSelector

Our redux setup is ready. Now lets configurate Authentication form. For this we will use Formik. Type the following into your terminal:

npm install --save formik

Now we can create following src/App.js component:

...
import {useDispatch, useSelector} from 'react-redux'
import {Field, Form, Formik} from 'formik'
import {login, logout} from './store/user'
function App() {
  const dispatch = useDispatch()
  const { user } = useSelector(state => state.user)
  if (user) {
    return (
      <div>
        Hi, {user.username}!
        <button onClick={() => dispatch(logout())}>Logout</button>
      </div>
    )
  }
  return (
    <div>
      <Formik
        initialValues={{ username: '', password: '' }}
        onSubmit={(values) => { dispatch(login(values)) }}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field type="text" name="username" />
            <Field type="password" name="password" />
            <button type="submit" disabled={isSubmitting}>Login</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

Please note that there is no connect! With useDispatch and useSelector we can now integrate Redux with pure components using hooks! We just need to wrap App with Provider and there is much less boilerplate compared to connect.

How Keep User Authenticated on Page Reload

Probably you've noticed that authentication is reseted on every page reload.

That is very easy to fix with localStorage with just a few lines added to src/store/user.js

+const initialUser = localStorage.getItem('user')
+  ? JSON.parse(localStorage.getItem('user'))
+  : null
+
const slice = createSlice({
  name: 'user',
  initialState: {
-    user: null,
+    user: initialUser,
  },
  reducers: {
    loginSuccess: (state, action) => {
      state.user = action.payload;
+      localStorage.setItem('user', JSON.stringify(action.payload))
    },
    logoutSuccess: (state, action) =>  {
      state.user = null;
+      localStorage.removeItem('user')
    },
  },
});

How to Store Token

My favorite API client library is Axios. I prefer Axios over built-in APIs for its ease of use and extra features like xsrf token support and interceptors.

Here is sample configuration that I often use:

const api = axios.create({
  baseURL: '/',
  headers: {
    'Content-Type': 'application/json'
  },
})
api.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Token ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)
export default api

How to Redirect after login

The easiest way to redirect user after redux action is to use Redirect component provided by React.

This can be one within Login form component, for example with code like this:

if (user) {
    return (
      <Redirect to={'/home'} />
    )
  }

3 React concepts I wish I knew when I started

Ruben Gabrielyan — Mon, 21 Jun 2021 14:51:01 +0000

When I stumbled upon React, I barely had any JS knowledge. I had been told by my peers and the internet, of course, that some JavaScript knowledge would be necessary to start with React JS, but, I took the chance. Belonging to the kind of people that “learn by doing” , I went on to explore the JavaScript world and JSX that comes with React.

This is for beginners and people who are the same kind.

function App() {
  console.log("app")
  const [state, toggle] = useState(true);
  return (
    <div>
    <h2>{`${state}`}</h2>
    <button onClick={() => { toggle(!state) }}>Toggle</button>
    </div>
 )
}

I had a heading and a button to toggle it’s content. I also had a console.log inside the function to log a message every time state was changed and a re render was triggered.
I expected a single log on each button click. But I noticed every time the button was clicked, there were two logs.

I moved on without being bothered by this behaviour.
Later, when I noticed the same behaviour in something more complex , it bugged me. That’s when I realised that this behaviour was only visible in development and not in production. I searched online and found that, it was due to Strict Mode. I noticed that in index.js, my app was wrapped within .
Quoting from the ReactJS documentation itself: “Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor, render, and shouldComponentUpdate methods.”

If you’re using create-react-app , you may notice that your app is wrapped in in index.js.
So, this was the issue. This is why I had two logs on every render. I wish I had known this. To read more about Strict Mode check here.

2. Keys
When rendering multiple components, we usually map over lists like,

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>    {number}
  </li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,  document.getElementById('root')
);

React uses keys to optimise performance. Read more about why keys are necessary, here .
From the official docs: “Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.”
Now one obvious idea that would come to mind: we could use the array index as the key. But wait, think again, because it is not the recommended approach.
Think about what would happen if the list is prepended, since React only relies on the keys to decide if the DOM should be updated. Read about this here . The article demonstrates the problem using a very good example of text inputs.

3. Stale state

The problem is, in some cases you don’t have the latest state at your disposal.
This one, I had to struggle a lot to get my head around. For someone who had no idea about closures and why they were important in the context of React, I had to read a lot about the “behind-the-scenes” of React.
Consider this piece of code,

function App() {

    const [state, toggle] = useState(0);

    useEffect(()=>{

    setInterval(()=>{
      console.log(`state ${state}`);
    },3000)

},[])
    return (
       <div>
       <h2>{`${state}`}</h2>
       <button onClick={() => { toggle(state+1) }}>Increase</button>
       </div>
)
}

On clicking the button and updating the state, there is no change in the logs. The logs show the initial state which is 0. Look at the GIF below.

The answer to ‘why’ , lies not in React but JavaScript itself. It is related to something known as closures. Read about closures here .
This is not a huge problem here, but imagine an event listener being attached to an object, in useEffect and getting stale state inside it. Check out this SO answer which shows the proper way to use event listeners in useEffect.
It’s important to know that having fundamental JS knowledge should be given higher priority than having framework or library specific
knowledge. Because, regardless of what library you use , you still have to write JS code and deal with JS related concerns. It’s important not to limit yourself to a specific framework/library and it’s possible only by having a strong JS base.
Never underestimate the knowledge you’re gonna get just by looking at documentations, especially when they’re as good as React’s.
Thank you for reading Please Buy Me a Coffee https://www.buymeacoffee.com/rubengabriel !