DEV Community: Debmallya Bhattacharya

Using Redux Toolkit

Debmallya Bhattacharya — Tue, 30 Jun 2020 07:45:01 +0000

Redux Toolkit saves us a from a ton of boilerplate that you generally associate with Redux, making it easier to adopt and implement Redux in our app. It comes preloaded with all the tools which we usually need for building a Redux app. Additionally, we can also modify the given configurations to suit our needs.

Main differences

There is a 3 part tutorial in the Redux Toolkit docs to help you transform your boilerplate code into a sleek one. But I have listed the major differences below with code comparison:

Installation

@reduxjs/toolkit comes preloaded with the redux dependencies as well as some essential middlewares.

Redux Toolkit

yarn add @reduxjs/toolkit

Redux

yarn add redux 
yarn add react-redux 
yarn add redux-immutable-state-invariant 
yarn add redux-thunk 
yarn add redux-devtools-extension

Creating the store

In case of Redux Toolkit, configureStore calls combineReducers internally to create the rootReducer, so that all you have to do is pass an object and not worry about creating it manually. It also configures a few essential middlewares internally to help you debug and write clean and error-free code. These configurations are fully customisable, should you need it. Check the official docs for more info.

Redux Toolkit

import { configureStore } from '@reduxjs/toolkit'
import filter from '...'
import movie from '...'

export default configureStore({
  reducer: {
    filter,
    movie,
  },
})

Redux

import { combineReducers, applyMiddleware, createStore } from "redux"
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'
import filter from '...'
import movie from '...'

// Custom middlewares based on redux-immutable-state-invariant
const immutableStateInvariant = // deeply compares state values for mutations. 
// It can detect mutations in reducers during a dispatch, and also mutations that 
// occur between dispatches (such as in a component or a selector). When a 
// mutation is detected, it will throw an error and indicate the key path for 
// where the mutated value was detected in the state tree.
const serializableStateInvariant = // a custom middleware created specifically 
// for use in Redux Toolkit. Similar in concept to immutable-state-invariant, 
// but deeply checks your state tree and your actions for non-serializable values 
// such as functions, Promises, Symbols, and other non-plain-JS-data values. 
// When a non-serializable value is detected, a console error will be printed 
// with the key path for where the non-serializable value was detected.
const middleware = process.env.NODE_ENV !== 'production' ?
  [thunk, immutableStateInvariant, serializableStateInvariant] :
  [thunk];
const rootReducer = combineReducers({ 
  filter, 
  movie, 
})
export default createStore(rootReducer, composeWithDevTools(
  applyMiddleware(...middleware)
))

Creating reducers and sync actions (aka, slices)

Redux Toolkit introduces a new concept called slices, which is essentially a consolidated object containing the reducer and all the synchronous actions. No more definitions of actions and action types. Additionally, the state is mutable now courtesy of the included middlewares.

Redux Toolkit

import { createSlice } from '@reduxjs/toolkit'

const sliceName = 'movie'

const movieSlice = createSlice({
  name: sliceName,
  initialState: {
    entities: [],
    totalEntities: 0,
    error: '',
    loading: false,
  },
  reducers: {
    resetMovies: (state) => {
      state.entities = []
      state.totalEntities = 0
      state.error = ''
      state.loading = false
    },
  },
})

export const { resetMovies } = movieSlice.actions

export default movieSlice.reducer

Redux

const initialState = {
  entities: [],
  totalEntities: 0,
  error: '',
  loading: false,
}

const RESET_MOVIES = 'RESET_MOVIES'

export const resetMovies = () => ({
  type: RESET_MOVIES
})

export default function movie(state = initialState, action) {
  switch (action.type) {
    case RESET_MOVIES:
      return {
        entities: [],
        totalEntities: 0,
        error: '',
        loading: false,
      }
    default:
      return state
  }
}

Creating async actions (aka, thunks)

Redux Toolkit also comes with the createAsyncThunk function. It gives us 3 implied sync actions for every thunk to be processed in our reducer, namely <thunkStringName>.pending, <thunkStringName>.fulfilled and <thunkStringName>.rejected. Thus, you don't have to manually define actions for these 3 states.

Redux Toolkit

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

const sliceName = 'movie'

export const fetchMovies = createAsyncThunk(
  `${sliceName}/fetchMovies`,
  (_, { getState }) => {
    const { searchTerm, page, type } = getState().filter
    return movieAPI.fetchBySearch(searchTerm, page, type)
  }
)

const movieSlice = createSlice({
  ...
  extraReducers: {
    [fetchMovies.pending]: (state) => {
      state.loading = true
    },
    [fetchMovies.fulfilled]: (state, action) => {
      state.entities = action.payload.Search
      state.totalEntities = action.payload.totalResults
      state.error = ''
      state.loading = false
    },
    [fetchMovies.rejected]: (state, action) => {
      state.entities = []
      state.totalEntities = 0
      state.error = action.error.message
      state.loading = false
    },
  },
})

Redux

...

const FETCH_MOVIES_PENDING = 'FETCH_MOVIES_PENDING'
const FETCH_MOVIES_FULFILLED = 'FETCH_MOVIES_FULFILLED'
const FETCH_MOVIES_REJECTED = 'FETCH_MOVIES_REJECTED'

...

export const fetchMoviesPending = () => ({
  type: FETCH_MOVIES_PENDING
})
export const fetchMoviesFulfilled = (result) => ({
  type: FETCH_MOVIES_FULFILLED,
  payload: result
})
export const fetchMoviesRejected = (error) => ({
  type: FETCH_MOVIES_REJECTED,
  payload: error
})

export function fetchMovies() {
  return async function (dispatch, getState) {
    dispatch(fetchMoviesPending())
    const { searchTerm, page, type } = getState().filter
    try {
      const result = await movieAPI.fetchBySearch(searchTerm, page, type)
      dispatch(fetchMoviesFulfilled(result))
    } catch (error) {
      dispatch(fetchMoviesRejected(error))
    }
  }
}

export default function movie(...) {
  switch (action.type) {
    ...
    case FETCH_MOVIES_PENDING:
      return {
        ...state,
        loading: true,
      }
    case FETCH_MOVIES_FULFILLED:
      return {
        entities: action.payload.Search,
        totalEntities: action.payload.totalResults,
        error: '',
        loading: false,
      }
    case FETCH_MOVIES_REJECTED:
      return {
        entities: [],
        totalEntities: 0,
        error: action.error.message,
        loading: false,
      }
    ...
  }
}

Usage

Once the store and the slices have been created, you can setup Redux in your app the same way as you've always have.

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

Movies/index.jsx

import React, { useEffect } from 'react'
import Movies from './presenter'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'
import { search } from '../../services/filter/slice'

export default () => {
  const { entities, totalEntities, error, loading } = useSelector(
    (state) => state.movie,
    shallowEqual
  )
  const searchTerm = useSelector((state) => state.filter.searchTerm)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(search(searchTerm))
  }, [dispatch, searchTerm])

  return (
    <Movies
      entities={entities}
      totalEntities={totalEntities}
      error={error}
      loading={loading}
    />
  )
}

Repository

batbrain9392 / redux-tutorial

Sort of an IMDb clone with filters managed with Redux Toolkit

Redux Tutorial with Redux Toolkit and Hooks

It's a basic movie search app which uses redux to fetch movies and store your filters.

Documentaion of how I used Redux Toolkit is available here.

View on GitHub

Internationalization with Angular v10

Debmallya Bhattacharya — Thu, 25 Jun 2020 12:36:02 +0000

Goal

To render and deploy our Angular app in 3 languages:

English (will be generated by default, no setup required)
French
Spanish

Setup

Assuming that you already have an Angular project, follow these steps:

Add localisation package with ng add @angular/localize
Add the following scripts to package.json :

  "scripts": {
    ...
    "start": "ng serve",
    "build": "ng build --prod",
    "extract": "ng xi18n --output-path=src/locale",
    "start:fr": "npm start -- --configuration=fr --port 4201",
    "start:es": "npm start -- --configuration=es --port 4202",
    "build:i18n": "npm run build -- --localize"
  },

Add the i18n attribute with [title] | [description] @@[tag] to all hardcoded strings which you'd like to be translated, like this :

  <h1 i18n="Profile page title | A title for the Profile page @@profilePageTitle">
    Profile
  </h1>

Run npm run extract to extract the language translation file at src/locale/messages.xlf. It will look like this :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="profilePageTitle" datatype="html">
        <source>Profile</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/profile-settings/profile-settings.component.html</context>
          <context context-type="linenumber">4</context>
        </context-group>
        <note priority="1" from="description"> A title for the Profile page </note>
        <note priority="1" from="meaning">Profile page title </note>
      </trans-unit>
    </body>
  </file>
</xliff>

Create a copy of this file and rename these 2 as :
1. messages.fr.xlf (for French translations)
2. messages.es.xlf (for Spanish translations)
Modify the projects section angular.json in the following way to build and serve the different language builds:

  "projects": {
    "<your-project-name>": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            ...
            "fr": {
              "localize": ["fr"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            ...
            "fr": {
              "browserTarget": "<your-project-name>:build:fr"
            },
            "es": {
              "browserTarget": "<your-project-name>:build:es"
            }
          }
        },
        ...
      },
      "i18n": {
        "locales": {
          "fr": "src/locale/messages.fr.xlf",
          "es": "src/locale/messages.es.xlf"
        }
      }
    }
  },

Add translations of the targeted word "Profile" in the translation files in their respective languages with the <target> tag :

        <!-- messages.fr.xlf -->
        <source>Profile</source>
        <target>Profil</target>

        <!-- messages.es.xlf -->
        <source>Profile</source>
        <target>Perfil</target>

Check if the translations are working by running
1. npm run start or ng serve for English (default)
2. npm run start:fr or ng serve -c=fr for French
3. npm run start:es or ng serve -c=es for Spanish
Build the app for all languages by running npm run build:i18n or ng build --prod --localize. It will create 3 build folders under dist/<your-project-name> :
1. en-US
2. fr
3. es
Deploy folder dist/<your-project-name> to any static hosting services (like Firebase). Your sites will be available at
1. https://your.site/en-US/ (English)
2. https://your.site/fr/ (French)
3. https://your.site/es/ (Spanish)

Switch between the sites from inside the app

Create a switch-language component with a dropdown listing all the languages offered. On selection of any language, redirect the user to the corresponding site.
Additionally, hide the component if you're in development mode.

import { Component, OnInit, isDevMode } from '@angular/core'

@Component({
  selector: 'app-switch-language',
  template: `
    <select
      *ngIf="!isDev"
      [(ngModel)]="siteLocale"
      #language
      (change)="onChange(language.value)"
    >
      <option *ngFor="let lang of languageList" [value]="lang.code">
        {{ lang.label }}
      </option>
    </select>
  `,
})
export class SwitchLanguageComponent implements OnInit {
  isDev = isDevMode()
  siteLanguage: string
  siteLocale: string
  languageList = [
    { code: 'en-US', label: 'English' },
    { code: 'fr', label: 'French' },
    { code: 'es', label: 'Spanish' },
  ]

  ngOnInit() {
    this.siteLocale = window.location.pathname.split('/')[1]
    this.siteLanguage = this.languageList.find(
      (f) => f.code === this.siteLocale
    )?.label
    if (!this.siteLanguage) {
      this.onChange(this.languageList[0].code)
    }
  }

  onChange(selectedLangCode: string) {
    window.location.href = `/${selectedLangCode}`
  }
}

Repository

batbrain9392 / blueface-assignment

Angular app in 3 languages - English, French and Spanish

BluefaceAssignment (ng 10.0.0)

The problem statement is in ProblemStatement.pdf. Sites are available here - English, French, Spanish.

Documentaion of how to achieve internationalization in Angular 10 is available here.

View on GitHub