I am working on a MERN app with redux toolkit. Currently, I am facing a problem with my update functionality, when I click on the update button I can see in redux dev tools the request is rejected and in the console, the id is showing undefined while I am passing it. I am probably missing something in my code, if someone can point it out and explain that would be great. Thanks in advance. Here below are my code:
postService.js:
import axios from 'axios';
const API_URL = '/api/posts/';
const updatePost = async (_id, postData) => {
const response = await axios.patch(API_URL + _id, postData);
return response.data;
};
const postService = {
updatePost,
};
export default postService;
postSlice.js:
import { createSlice, createAsyncThunk } from '#reduxjs/toolkit';
import postService from './postService';
const initialState = {
posts: [],
isError: false,
isSuccess: false,
isLoading: false,
message: '',
};
export const updatePost = createAsyncThunk(
'posts/updatePost',
async ({ id, postData }, thunkAPI) => {
const { postCreator, title, body, imageFile } = postData;
try {
return await postService.updatePost(id, {
postCreator,
title,
body,
imageFile,
});
} catch (error) {
console.log(error.message);
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
export const postSlice = createSlice({
name: 'post',
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(updatePost.pending, (state) => {
state.isLoading = true;
})
.addCase(updatePost.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
const { id, postCreator, title, body, imageFile } = action.payload;
const existingPost = state.find((post) => post.id === id);
if (existingPost) {
existingPost.postCreator = postCreator;
existingPost.title = title;
existingPost.body = body;
existingPost.imageFile = imageFile;
}
})
.addCase(updatePost.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
export default postSlice.reducer;
Form.js:
const Form = ({ activeId, setActiveId }) => {
const [postData, setPostData] = useState({
postCreator: '',
title: '',
body: '',
imageFile: '',
});
const post = useSelector((state) =>
activeId ? state.posts.posts.find((post) => post._id === activeId) : null
);
const user = JSON.parse(localStorage.getItem('user'));
const dispatch = useDispatch();
useEffect(() => {
if (post) setPostData(post);
}, [post]);
const clearInputField = () => {
setActiveId(0);
setPostData({
postCreator: '',
title: '',
body: '',
imageFile: '',
});
};
const handleSubmit = async (e) => {
e.preventDefault();
if (activeId) {
dispatch(updatePost({ activeId, postData }));
clearInputField();
} else {
dispatch(createPost(postData));
clearInputField();
}
};
In the updatePost thunk in postSlice.js, you are attempting to destructure the variables { id, postData } from the payload creator args.
But in Form.js, you are sending an object { activeId, postData } when you dispatch updatePost.
So both id and postData will be undefined because neither exist on the object.
You could change it to:
dispatch(updatePost({id: activeId, postData: formData}))
Related
I need assistance on fetching my blob image from MySQL to browser.
I am using redux toolkit. So far, these are what I have. When I dispatch the imageId, I get isSuccess to be true on my Redux Dev Tool but I don't seem to know how to get the image to my browser.
Please, kindly help me solve this. I am stuck.
Thanks
CONTROLLER FILE on profileController.js
const getProfilePicture = async (req, res) => {
try {
const base64Data = await ProfilePic.findByPk(req.params.imageId);
res.send(base64Data);
} catch (error) {
res.status(500).send("error.message");
}
};
What I get on Postman when I hit the controller file route - the Database contains::: id(imageId), avatar(Blob Image), Description, createdAt, UpdatedAt
{
"id": "6dc38579-4e0f-4d4b-8777-7b6527408e72",
"avatar": {
"type": "Buffer",
"data": [
91,
111,
98,
106,
101,
99,
116,
32,
79,
98,
106,
101,
99,
116,
93
]
},
"description": null,
"createdAt": "2023-02-17T09:22:28.000Z",
"updatedAt": "2023-02-17T09:28:00.000Z"
}
SERVICE FILE on getProfilePictureService.js
import axios from "axios";
const API_URL = "http://localhost:4000/api/profile/";
const getProfilePicture = async (imageId, token) => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
responseType: "arraybuffer",
};
try {
const response = await axios.get(
API_URL + "getProfilePicture/" + imageId,
config
);
const imageBuffer = Buffer.from(response.data, "binary");
const imageBlob = new Blob([imageBuffer], { type: "image/jpg" });
return URL.createObjectURL(imageBlob);
} catch (error) {
console.log(error);
}
};
const getProfilePictureService = {
getProfilePicture,
};
export default getProfilePictureService;
SLICE FILE on getProfilePictureSlice.js
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import getProfilePictureService from "./getProfilePictureService";
const initialState = {
getProPics: [],
isLoading: false,
isSuccess: false,
isError: false,
message: "",
};
//get profile picture
export const getProfilePicture = createAsyncThunk(
"profile/picture",
async (imageId, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
return await getProfilePictureService.getProfilePicture(imageId, token);
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
export const getProfilePictureSlice = createSlice({
name: "getProPic",
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(getProfilePicture.pending, (state) => {
state.isLoading = true;
})
.addCase(getProfilePicture.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.getProPics = action.payload;
})
.addCase(getProfilePicture.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
});
},
});
export const { reset } = getProfilePictureSlice.actions;
export default getProfilePictureSlice.reducer;
THE PROFILE BAR COMPONENT where I intend using the image ProfileBar.js
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getProfilePicture, reset } from "./features/getProfilePicture/getProfilePictureSlice";
const ProfileBar = ({ profile }) => {
const dispatch = useDispatch();
const [imageUrl, setImageUrl] = useState(null);
const imageId = profile.id; //I placed the profile id (which is the same as the image primary key in the database) in a constant
useEffect(() => {
dispatch(getProfilePicture(imageId)); //I dispatch that id here. I get isSuccess to be true after dispatching
return () => {
dispatch(reset());
};
}, [dispatch]);
useEffect(() => {
async function fetchImage() {
const url = await getProfilePicture(imageId);
setImageUrl(url); //I intended to use this to set the state after dispatching and isSuccess is true
}
fetchImage();
}, [imageId]);
return (
<div>
<img src={imageUrl} alt="Image" /> //this is supposed to get the image on browser
</div>
);
};
export default ProfileBar;
I am working on a MERN app and I have a problem when updating items. I am getting rejections when sending a patch request and there is not much info for debugging to solve the problem. I will appreciate it if someone can point out some logic that is not correct in my code. Thank you in advance.
Here below is the logic I have implemented.
postService.js:
import axios from 'axios';
const API_URL = '/api/posts/';
const updatePost = async (postId, postData, token) => {
const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};
const response = await axios.patch(`${API_URL}/${postId}/`, postData, config);
if (response.data) {
return {
...response.data,
id: postId,
};
}
};
postSlice.js:
import { createSlice, createAsyncThunk } from '#reduxjs/toolkit';
import postService from './postService';
const initialState = {
posts: [],
isError: false,
isSuccess: false,
isLoading: false,
message: '',
};
export const updatePost = createAsyncThunk(
'posts/updatePost',
async (id, postData, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
return await postService.updatePost(id, postData, token);
} catch (error) {
const message =
(error.response.data.message) ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
export const postSlice = createSlice({
name: 'post',
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(updatePost.pending, (state) => {
state.isLoading = true;
})
.addCase(updatePost.fulfilled, (state, action) => {
state.isLoading = false;
state.isSuccess = true;
state.posts = state.posts.map((post) =>
post.id === action.payload.id ? action.payload : post
);
})
.addCase(updatePost.rejected, (state, action) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
})
});
},
});
export const selectAllPosts = (state) => state.posts.posts;
export const { reset } = postSlice.actions;
export default postSlice.reducer;
Form.js:
const Form = ({ postId, setPostId }) => {
const [formData, setFormData] = useState({
postCreator: '',
title: '',
body: '',
imageFile: '',
});
const dispatch = useDispatch();
const user = JSON.parse(localStorage.getItem('user'));
const post = useSelector((state) =>
postId ? state.posts.posts.find((post) => post._id === postId) : null
);
useEffect(() => {
if (post) setFormData(post);
}, [post]);
const clearPost = () => {
setPostId(0);
setFormData({
postCreator: '',
title: '',
body: '',
imageFile: '',
});
};
const handleSubmit = async (e) => {
e.preventDefault();
if (
!formData.postCreator &&
!formData.title &&
!formData.body &&
!formData.imageFile
) {
toast.warning(
'Please fill out all fields, and make sure you are also logged in'
);
} else if (postId) {
dispatch(updatePost(postId, formData));
console.log(postId);
} else {
dispatch(createPost(formData));
clearPost();
setPostId(null);
}
clearPost();
};
The second param of createAsyncThunk is the payloadCreator.
The first param of the payloadCreator is the arguments. The second param of payloadCreator is thunkAPI.
So you should combine id and postData into a single object to represent the arguments.
Update postSlice.js:
export const updatePost = createAsyncThunk(
'posts/updatePost',
async ({id, postData}, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token;
return await postService.updatePost(id, postData, token);
} catch (error) {
const message =
(error.response.data.message) ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);
Update where you dispatch the updatePost thunk:
updatePost({
id: 123,
postData: {
foo: 'bar'
}
})
I am trying to create a scraping application using redux toolkit for learning purposes but the scraping process fails whenever I pass custom parameters in the dispatch statement but works correctly on passing default parameters in the thunk
My async thunk
export const loadData = createAsyncThunk(
"alldata/getdata",
async ({ pageNo, language }, thunkAPI) => {
const data = await fetch(
`http://localhost:5000/scrape?pageNo=${encodeURIComponent(
pageNo
)}&language=${encodeURIComponent(language)}`
);
const json = data.json();
return json;
}
);
My slice
const projectSlice = createSlice({
name: "allprojects",
state: {
projectState: [],
workingState: [],
isLoading: false,
hasError: false,
},
reducers: {
addProject: (state, action) => {
return state.workingState.push(action.payload);
},
removeProject: (state, action) => {
return state.workingState.filter(
(project) => project.id !== action.payload.id
);
},
},
extraReducers: {
[loadData.pending]: (state, action) => {
state.isLoading = true;
state.hasError = false;
},
[loadData.fulfilled]: (state, action) => {
const { json } = action.payload;
state.isLoading = false;
state.hasError = false;
},
[loadData.rejected]: (state, action) => {
state.isLoading = false;
state.hasError = true;
},
},
});
export const { addProject, removeProject } = projectSlice.actions;
export const { Projectreducer } = projectSlice.reducer;
export const selectAllPosts = (state) => state.allprojects.projectState;
Calling the async action
React.useEffect(() => {
console.log(dispatch(loadData(1, "ruby")));
}, []);
//url:https://github.com/search?p=undefined&q=language%3Aundefined
how do I solve this error
The async thunk arguments must be collected in one object:
dispatch(loadData({ pageNo: 1, language: "ruby" }))
See https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator
I understand this has been asked before but so far no answers except someone making a syntax mistake. I have verified this against every tutorial I've seen online and I can't find the issue. It seems to be coming from the fullfilled extraReducer
import { createSlice, createAsyncThunk } from "#reduxjs/toolkit";
import axios from "axios";
const KEY = process.env.REACT_APP_API_KEY
const BASE_URL = process.env.REACT_APP_BASE_URL
const GLOBALVIEWS_API = `${BASE_URL}/countrymap`
const initialState = {
mapdata:{},
status: 'idle', //'idle', 'loading', 'succeeded', 'failed'
error:null
}
export const fetchMapData = createAsyncThunk(
'mapdata/fetchMapData',
async (id) => {
const response = await axios.get(
GLOBALVIEWS_API,
{
headers: {
'Content-Type': 'application/json',
'X-API-KEY': KEY,
},
params: {
titleId: id,
}
}
)
return response.data.Item;
}
)
const mapSlice = createSlice({
name: 'mapdata',
initialState,
reducers:{
addMapData: (state, { payload }) => {
state.mapdata = payload
}
},
extraReducers: {
[fetchMapData.pending]: () => {
console.log("Pending");
},
[fetchMapData.fulfilled]: (state, { payload }) => {
state.status = 'succeeded'
console.log("Succeeded", payload);
return {...state, mapdata: payload}
},
[fetchMapData.rejected]: () => {
console.log("Rejected");
},
}
})
// SELECTORS
export const getMapStatus = (state) => state.mapdata.status;
export const allMapData = (state) => state.mapdata.mapdata;
export const { addMapData } = mapSlice.actions;
export default mapSlice.reducer
In the component, nothing weird, and yes everything is imported
const {id} = useParams();
const dispatch = useDispatch();
const allmapdata = useSelector(allMapData)
const addmapdata = useSelector(addMapData)
const mapStatus = useSelector(getMapStatus)
useEffect(() => {
dispatch(fetchMapData(id))
lazy(setMap(allmapdata))
console.clear()
console.log("mapdata: ", allmapdata);
}, [id, allmapdata, dispatch])
You can see in my image below that my fetch is successful and I am getting data. So how do I get rid of this error? Thanks in advance.
This is the issue:
state.status = 'succeeded'
console.log("Succeeded", payload);
return {...state, mapdata: payload}
That is indeed both a "mutation of the existing state" and a "return of a new value", and that's exactly what the error is warning you about.
You can change that to:
state.status = 'succeeded'
state.mapdata = action.payload
Im using createasyncthunk for creating async action to dispatch async action with redux toolkit , im having all the async api functions in seperate file ,ive imported into my createslice and used in extrareducers.
import { createAsyncThunk } from '#reduxjs/toolkit'
import { DataService } from 'config.axios'
import { getItem } from 'utils/localStorageController'
import { activateAlert } from 'reduxStore/slices/alert/AlertSlice'
import { clearRuleData } from '../RuleDataSlice'
const study_id = getItem('study_id')
export const getEditCheckByStatus = createAsyncThunk(
'editchecks/getEditCheck',
async (params, thunkAPI) => {
let editCheckType = params?.type ? `/${params.type}` : ''
let searchParams = params?.search ? `&search=${params.search}` : ''
let page = params?.page ? `&page=${params.page}` : ''
let per_page = params?.per_page ? `&per_page=${params.per_page}` : ''
let sortField = params?.sortField ? `&sort_field=${params.sortField}` : ''
let sortOrder = params?.sortOrder ? `&order=${params.sortOrder}` : ''
try {
const { data } = await DataService.get(
`/edit-checks${editCheckType}?status=${params.status}&study_id=${study_id}${searchParams}${page}${per_page}${sortField}${sortOrder}`
)
return data
} catch (error) {
console.error('Get EC by status error:', error)
}
}
)
export const getEditCheckCount = createAsyncThunk(
'editchecks/getEditCheckCount',
async () => {
try {
const { data } = await DataService.get(`/edit-checks/count`)
return data
} catch (error) {
console.error('Get EC Count error:', error)
}
}
)
export const getEditCheckWithFilter = createAsyncThunk(
'editchecks/getEditCheckWithFilter',
async (params, thunkAPI) => {
let page = params?.page ? `&page=${params.page}` : ''
let per_page = params?.per_page ? `&per_page=${params.per_page}` : ''
let searchParams = params?.search ? `&search=${params.search}` : ''
let sortField = params?.sortField ? `&sort_field=${params.sortField}` : ''
let sortOrder = params?.sortOrder ? `&order=${params.sortOrder}` : ''
try {
const { data } = await DataService.get(
`/edit-checks/status/${params.inAction}?worked_for=${params.forAction}${searchParams}${page}${per_page}${sortField}${sortOrder}`
)
return data
} catch (error) {
console.error('Get Edit Checks with Filter error:', error)
}
}
)
export const updateWorkflow = createAsyncThunk(
'editchecks/updateworkflow',
async (params, thunkAPI) => {
try {
await DataService.put(
`/edit-checks/${params.id}/workflow/${params.action}`,
params.api_body
)
thunkAPI.dispatch(
activateAlert({ color: 'success', content: params.content })
)
} catch (error) {
console.error('Update workflow error:', error)
thunkAPI.dispatch(activateAlert({ color: 'danger', content: error }))
}
}
)
export const deleteEditCheck = createAsyncThunk(
'editchecks/deleteEditCheck',
async (id, thunkAPI) => {
try {
await DataService.delete(`/edit-checks/${id}/`)
thunkAPI.dispatch(
activateAlert({
color: 'success',
content: 'Edit Check Deleted Succesfully',
})
)
} catch (error) {
console.error('Delete EditCheck error:', error)
thunkAPI.dispatch(activateAlert({ color: 'danger', content: error }))
}
}
)
export const getEditCheckById = createAsyncThunk(
'ruledata/getEditCheckById',
async (id, thunkAPI) => {
try {
const { data } = await DataService.get(`/edit-checks/${id}/`)
return data.data
} catch (error) {
console.error('Get Edit Check with ID error:', error)
}
}
)
export const createRuleData = createAsyncThunk(
'ruledata/createrule',
async (params, thunkAPI) => {
try {
const { data } = await DataService.post(`/edit-checks/`, params.api_body)
thunkAPI.dispatch(
activateAlert({
color: 'success',
content: 'New Rule Request Created Succesfully',
})
)
thunkAPI.dispatch(clearRuleData())
if (params.send_for_development) {
thunkAPI.dispatch(
updateWorkflow({
api_body: {
status: 'DEVELOPMENT',
comments: 'Please develop the code',
},
id: data.data.id,
content: 'EC Sent to Development',
action: '',
})
)
}
return data.data.id
} catch (error) {
console.error('Create Rule data error:', error)
thunkAPI.dispatch(activateAlert({ color: 'danger', content: error }))
}
}
)
export const updateRuleDataForm = createAsyncThunk(
'ruledata/updaterule',
async (params, thunkAPI) => {
try {
const { data } = await DataService.put(
`/edit-checks/${params.api_body?.id}`,
params.api_body
)
thunkAPI.dispatch(
activateAlert({
color: 'success',
content: 'Edit Check Updated Succesfully',
})
)
thunkAPI.dispatch(clearRuleData())
if (params?.send_for_development) {
thunkAPI.dispatch(
updateWorkflow({
api_body: {
status: 'DEVELOPMENT',
comments: 'Please develop the code',
},
id: data.data.id,
content: 'EC Sent to Development',
action: '',
})
)
}
} catch (error) {
console.log('Update rule data form error:', error)
thunkAPI.dispatch(activateAlert({ color: 'danger', content: error }))
}
}
)
export const getECDomains = createAsyncThunk('ruledata/getdomain', async () => {
try {
const { data } = await DataService.get(`/studies/1/domains/`)
return data.data
} catch (error) {
console.log('Get domain error', error)
}
})
export const getECDomainCols = createAsyncThunk(
'ruledata/getdomaincols',
async (domain, thunkAPI) => {
try {
const { data } = await DataService.get(
`/studies/1/domains/${domain}/variables`
)
let cols = data.data.map(function (el) {
return el.name
})
let cols_data = cols.map((col) => ({ label: col, value: col }))
console.log(cols, cols_data, 'action cols')
return {domain , cols: cols_data }
} catch (error) {
console.error('Get Edit Check domain columns error:',error)
}
}
)
export const saveCodeScript = createAsyncThunk(
'editchecks/savecodescript',
async (params, thunkAPI) => {
const codeData = new FormData()
codeData.append('source_code', params.code)
try {
await DataService.post(
`/edit-checks/${params.id}/script/?study_id=75`,
codeData,
{
'Content-Type': 'application/x-www-form-urlencoded',
}
)
} catch (error) {
console.error('Save script error: ', error)
}
}
)
The below file is src/reduxStore/slices/edit-checks/services/editCheckthunk.js
This is in different file.
import { createSlice, createAction } from '#reduxjs/toolkit'
import { push } from 'connected-react-router'
import {
createRuleData,
updateRuleDataForm,
getECDomains,
getECDomainCols,
getEditCheckById,
} from './services/editCheckthunk'
const initialState = {
ruleData: {
name: '',
source_data_format: '',
severity: '',
processing_level: '',
description: '',
query_text: '',
dataset: {
primary: {
domain: '',
columns: [],
},
relational: {
domain: '',
columns: [],
},
},
},
// from the api
dataset_data: {
domains: [],
domain_cols: {},
},
ruleDataLoader: false,
}
export const clearRuleData = createAction(
'ruledata/clearformdata',
function prepare() {
return (dispatch) => {
dispatch(push('/edit-checks/new'))
}
}
)
const ruleDataSlice = createSlice({
name: 'ruledata',
initialState,
reducers: {
updateRuleData(state, action) {
const { key, value } = action.payload
state.ruleData[key] = value
},
updateDataset(state, action) {
const { key_1, key_2, value } = action.payload
state.ruleData.dataset[key_1] = {
...state.ruleData.dataset[key_1],
[key_2]: value,
}
},
},
extraReducers: {
[clearRuleData]: (state, action) => {
state.ruleData = initialState.ruleData
},
[getEditCheckById.fulfilled]: (state, action) => {
state.ruleData = action.payload
},
[createRuleData.pending]: (state, action) => {
state.ruleDataLoader = true
},
[createRuleData.fulfilled]: (state, action) => {
state.ruleDataLoader = false
state.ruleData.id = action.payload
},
[createRuleData.rejected]: (state, action) => {
state.ruleDataLoader = false
},
[updateRuleDataForm.pending]: (state, action) => {
state.ruleDataLoader = false
},
[updateRuleDataForm.fulfilled]: (state, action) => {
state.ruleDataLoader = false
state.ruleData.id = action.payload
},
[updateRuleDataForm.rejected]: (state, action) => {
state.ruleDataLoader = false
},
[getECDomains.fulfilled]: (state, action) => {
state.dataset_data.domains = action.payload
},
[getECDomainCols.fulfilled]: (state, action) => {
const { domain, cols } = action.payload
state.dataset_data.domain_cols = {
...state.dataset_data.domain_cols,
[domain]: cols,
}
},
},
})
export const { updateDataset, updateRuleData } = ruleDataSlice.actions
export default ruleDataSlice.reducer
These are my other reducers with createasyncthunk functions.
Im dispatching , say getEditCheckById action in component to call the API.
import React, {useState, useEffect} from "react";
import { useSelector, useDispatch } from "react-redux";
import { useHistory, useLocation } from 'react-router'
import Select from 'react-select'
import { updateRuleDataForm,createRuleData,getECDomains,getECDomainCols,getEditCheckById } from 'reduxStore/slices/edit-checks/services/editCheckthunk';
import { updateRuleData ,clearRuleData, updateDataset} from 'reduxStore/slices/edit-checks/RuleDataSlice';
import chevronLeftIcon from 'assets/img/icons/utils/fi_chevron-left.svg'
function CreateEditCheck(props) {
const { search,pathname } = useLocation()
const searchParams = new URLSearchParams(search)
const editCheckId = searchParams.get('id')
const isEditParam = searchParams.get('edit')
const [isEdit, setIsEdit] = useState(isEditParam === 'true' || isEditParam === null ? true : false)
const {ruleData , dataset_data} = useSelector((state) => state.editChecks.ruledata)
const dispatch = useDispatch()
const action = pathname.split('/')[2]
const history = useHistory()
useEffect(() => {
if (action === 'edit') {
dispatch(getEditCheckById(editCheckId))
}
dispatch(getECDomains())
}, [])
}
But im getting TypeError: Cannot read properties of undefined (reading 'fulfilled') while running the app. THank in advance