Posts

Redux Toolkit Extra Reducer explained (+ createAsyncThunk)

 Redux/ xyzApi.js import { createAsyncThunk } from "@reduxjs/toolkit" ; import axios from "axios" ; const fetchUserData = createAsyncThunk ( "user/fetchUserData" , async (userId, { extra }) => { //const { apiClient } = extra; const response = await axios. get ( `/users/ ${userId} ` ); return response. data ; } ); export default fetchUserData;  Redux/  userSlice .js  // Reducer import { createSlice } from "@reduxjs/toolkit" ; import { fetchUserData } from "./thunks" ; const userSlice = createSlice ({ name : "user" , initialState : { data : null , status : "idle" , error : null , }, reducers : {}, extraReducers : ( builder ) => { builder . addCase (fetchUserData. pending , ( state ) => { state. status = "loading" ; }) . addCase (fetchUserData. fulfilled , ( state, action ) => { state. status = "...

React Interview Questions

Replace array value in javascript var users = [ { id : 1 , firstname : 'John' , lastname : 'Ken' }, { id : 2 , firstname : 'Robin' , lastname : 'Hood' }, { id : 3 , firstname : 'William' , lastname : 'Cook' } ]; var editedUser = { id : 2 , firstname : 'Michael' , lastname : 'Angelo' }; users = users. map ( u => u. id !== editedUser. id ? u : editedUser); console . log ( 'users -> ' , users); Remove array value in javascript let value = 3 let arr = [ 1 , 2 , 3 , 4 , 5 , 3 ] arr = arr. filter ( item => item !== value) console . log (arr) // [ 1, 2, 4, 5 ] Hooks in react useState, useEffect, useRef, useMemo When to use a Class Component over a Function Component? If the component needs state or lifecycle methods then use class component otherwise use function component.  What is Middleware? arrow function vs normal function ? What is the use of super(props) ? So, the simple answer to thi...