Simple Redux

 Create Redux Folder

Create Reducers Folder. -->. create index.php

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
userToken: {access_token:''},
userDes: [{token: "QpwL5tke4Pnpja7X4", disclaimer: 'sdsd'}],
loading: true,
error: null
}

export const eveReducer = createSlice({
initialState,
name: 'eveReducer',
reducers: {
AuthToken: (state = initialState, action) => {
state.userToken = action.payload
},
UserDisclaimer:(state = initialState, action) => {
state.userDes = action.payload
},
logout:(state = initialState, action) => {
state.userToken = {},
state.userData = {}
},
},
})

export const { AuthToken , UserDisclaimer , logout} = eveReducer.actions

export default eveReducer.reducer


Create Store Folder. -->. create index.php

import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import { eveReducer } from '../Reducers';
import AsyncStorage from '@react-native-async-storage/async-storage';
const reducers = combineReducers({
eveReducer: eveReducer.reducer,
});

const persistConfig = {
key: 'root',
storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: false,
}),
});

export default store;

Use these to get data in front pages

import { useDispatch, useSelector } from 'react-redux';
import { AuthToken, UserDisclaimer } from '../../Redux/Reducers';

const dispatch = useDispatch()
const selectorDesclaimer = useSelector(state => state.eveReducer?.userDes);

dispatch(AuthToken({ access_token: responseJson.token }))


Comments

Post a Comment

Popular posts from this blog

Add Axios Interceptor in Services where Api is called

 Create Services folder in src Create Api Folder and create index.js import { url } from "../BaseURL" ; import axiosApiInstance from "../Interceptor" ; const outGetRegRegbasic = async ( data ) => {   return await axiosApiInstance . post ( `${ url }api/his7/reg/websrv/outGetRegRegbasic` , data ) } export const _services = {   outGetRegRegbasic , }; Create url Folder  and create index.js export const url = 'http://35.234.63.118:30000/' Create Interceptor folder  and create index.js import axios from 'axios' const axiosApiInstance = axios . create ({}); // Request interceptor for API calls axiosApiInstance . interceptors . request . use (     async config => {         config . headers = {             'Access-Control-Allow-Origin' : '*' ,             // 'Authorization': `Bearer ${store.getState()?.counter?.token}`,       ...
Read more

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...
Read more