I have a page and that page has two components. I am fetching the data from root component and passing data to child component using react-redux
. I tried to set the fetched data to a state variable that is in child component but it sets data before the fetch is complete in the root component. So, I am getting blank object.
JavaScript
x
9
1
// child component
2
const [myData, setMyData] = useState<any>(null);
3
const data = useSelector((state: { value: any }) => state.value);
4
5
useEffect(() => {
6
setMyData(data);
7
}, []);
8
9
JavaScript
1
14
14
1
// parent component
2
3
const dispatch = useDispatch();
4
5
useEffect(() => {
6
fetch(url)
7
.then((response) => response.json())
8
.then((data) => {
9
dispatch(setData(data));
10
});
11
12
}, []);
13
14
You can check the whole codebase : https://github.com/Sadiq1029/weather
Can someone help?
Advertisement
Answer
Check if data
is not null then update your child state
JavaScript
1
4
1
useEffect(() => {
2
if (data) setMyData(data);
3
}, [data ]);
4
data.ts
JavaScript
1
20
20
1
import { createSlice, createSelector } from "@reduxjs/toolkit";
2
3
export const dataSlice = createSlice({
4
name: "data",
5
initialState: { value: null },
6
reducers: {
7
setData: (state, action) => {
8
state.value = action.payload;
9
},
10
},
11
});
12
13
export const { setData } = dataSlice.actions;
14
15
const selectDataSlice = (state: any) => state.data
16
17
export const selectValue = createSelector(selectDataSlice, (state) => state.value)
18
19
export default dataSlice.reducer;
20
Background.tsx
JavaScript
1
42
42
1
import { Container, Flex, Text } from "@chakra-ui/react";
2
import type { NextPage } from "next";
3
import { useEffect, useState } from "react";
4
import { useSelector } from "react-redux";
5
import { selectValue } from "../../states/data";
6
7
const Background: NextPage = () => {
8
const [myData, setMyData] = useState<any>(null);
9
const data = useSelector(selectValue);
10
11
useEffect(() => {
12
if (data) {
13
setMyData(data);
14
}
15
}, [data]);
16
17
return (
18
<Flex
19
minW="100vw"
20
minH="100vh"
21
alignItems="flex-end"
22
style={{
23
background: `url('/images/background.jpg') center no-repeat`,
24
backgroundSize: "cover",
25
}}
26
>
27
<Flex id="stats" m="8" flexDirection="column" color="white">
28
<Text fontSize="xl" fontWeight="hairline">
29
{myData ? myData.name : ""}
30
{/* {data ? data.name : "hi"}, {data ? data.sys.country : "_"} */}
31
</Text>
32
<Text fontWeight="bold" fontSize="8xl">
33
{/* {data ? Math.round(data.main.temp) : "0"}°C */}
34
</Text>
35
{/* <Text>{data ? data.weather[0].main : ""}</Text> */}
36
</Flex>
37
</Flex>
38
);
39
};
40
41
export default Background;
42