Skip to content

Instantly share code, notes, and snippets.

View Rajatgms's full-sized avatar

Rajat Sharma Rajatgms

  • McKinsey & Company
  • Delhi, India
  • X @rajatgms
View GitHub Profile
@Rajatgms
Rajatgms / cartSlice.js
Created August 6, 2020 02:41
use Payload Creator
const todosSlice = createSlice({
name: 'cart',
initialState: [],
reducers: {
addItem: {
reducer: (state, action) => {
state.push(action.payload)
},
prepare: item => {
const id = nanoid()
@Rajatgms
Rajatgms / requestCheck.js
Created August 3, 2020 17:59
Use request ID to control state
const loaderSlice = createSlice({
name: 'loader',
initialState: {
loading: 'idle',
currentRequestId: undefined,
},
reducers: {},
extraReducers: {
[fetchUserById.pending]: (state, action) => {
if (state.loading === 'idle') {
@Rajatgms
Rajatgms / itemsAsyncAction.js
Created August 3, 2020 17:43
Async Action Condition
import { createAsyncThunk } from '@reduxjs/toolkit';
import fetchMarketItems from '../API/fetchMarketItems';
export const fetchAllItems = createAsyncThunk(
'items/fetchAllItems',
fetchMarketItems,
{
condition: (arg, api) => {
return !api.getState().items.length > 0;
},
import { createSlice } from '@reduxjs/toolkit';
const loaderSlice = createSlice({
name: 'loader',
initialState: false,
reducers: {
startLoader: (state, action) => action.payload,
},
extraReducers: builder => {
builder
@Rajatgms
Rajatgms / cartAction.js
Created August 3, 2020 15:37
thunkActionCreator Response handling
import { placeOrderThunk } from '../slice/cartSlice';
import { startLoader } from '../slice/loaderSlice';
import { error, success } from '../slice/notifySlice';
import { unwrapResult } from '@reduxjs/toolkit';
export const handleCartPaymentAsyncAction = () => {
return dispatch => {
dispatch(startLoader(true));
dispatch(placeOrderThunk())
// Always return resolved promise with error or payload hence used unwrapResult
@Rajatgms
Rajatgms / itemSlice.js
Created August 3, 2020 15:35
Slice with lifecycle
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import fetchMarketItems from '../API/fetchMarketItems';
export const fetchAllItems = createAsyncThunk(
'items/fetchAllItems',
fetchMarketItems,
{
condition: (arg, api) => {
return !api.getState().items.length > 0;
},
@Rajatgms
Rajatgms / notifySlice.js
Created August 3, 2020 14:54
createSlice
import { createSlice } from '@reduxjs/toolkit';
const initialAlert = {
variant: '',
message: '',
};
const notifySlice = createSlice({
name: 'notify',
initialState: initialAlert,
import { NOTIFY_SUCCESS, NOTIFY_ERROR, NOTIFY_RESET } from '../actions/notifyAction';
const initialAlert = {
variant: '',
message: '',
};
const notifyReducer = (alert = initialAlert, action) => {
if (action.type === NOTIFY_SUCCESS) {
return { ...alert, variant: 'success', message: action.payload};
@Rajatgms
Rajatgms / redux-notifyAction.js
Last active August 6, 2020 01:49
actionCreator
export const NOTIFY_SUCCESS = 'NOTIFY_SUCCESS';
export const NOTIFY_ERROR = 'NOTIFY_ERROR';
export const NOTIFY_RESET = 'NOTIFY_RESET';
export const notifySuccessAction = payload => ({ type: NOTIFY_SUCCESS, payload });
export const notifyErrorAction = payload => ({ type: NOTIFY_ERROR, payload });
export const notifyResetAction = () => ({ type: NOTIFY_RESET });
@Rajatgms
Rajatgms / store.js
Last active January 9, 2023 19:28
createStore vs configureStore
// Redux STORE
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const prodMiddleware = [thunk, immutableStateInvariant, serializableStateInvariant]:
const devMiddleware = [thunk];
const middleware = process.env.prod ? prodMiddleware : devMiddleware;
const enhancer = composeEnhancers(applyMiddleware(...middleware));
const ReduxStore = createStore(rootReducer, enhancer);
// RTK STORE