我们应该在多个位置渲染react组件吗

Question

所以，我有一个名为Balance组件的组件，我想在导航栏和页面(摘要页面(组件中显示它。

但我想防止它发出两次api请求。

balanceSlice的代码：

import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';
export const updateBalance = createAsyncThunk(
'balance/fetchBalance',
async () => {
const response = await fetchBalance();
return response.data;
}
);
const initialState = {
value: 0
};
export const balanceSlice = createSlice({
name: 'balance',
initialState,
reducers: {
},
extraReducers: () => {...}
});
export const selectBalance = (state) => state.balance.value;
export default balanceSlice.reducer;

这是Balance 的代码

import {useState, useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {updateBalance, selectBalance} from './balanceSlice';

function Balance() {
const balance = useSelector(selectBalance);
const dispatch = useDispatch();

useEffect(() => {
dispatch(updateBalance());
console.log('component ran')
}, [dispatch]);
return (
<>
{balance}  
</>
);
}
export default Balance;

由于我想在多个地方重用这个组件，所以我没有在这个组件中添加任何样式。样式是在摘要页面和导航栏中完成的。updateBalance正在从api请求新的余额。我正在使用redux工具包，并试图遵循单一责任原则，使组件小型化、可重用和可测试。

是否建议在多个位置渲染平衡组件？导航栏代码：

import Balance from './../../features/balance/Balance';
function TopNavbar() {
return (
<Navbar>
<span className={styles.navbar__text__span}><Balance /></span>
</Navbar>
);
}

类似地，我正在summaryPage组件中导入Balance组件并对其进行渲染。这是推荐的方法吗？还是我应该简单地从balanceSlice导入selectBalance并在导航栏中显示它？

Answer 1

您可以在任何需要的地方渲染Balance组件。平衡组件应该是这样的。

function Balance() {
const balance = useSelector(selectBalance);
const dispatch = useDispatch();
useEffect(() => {
if (balance.status === 'ready') {
dispatch(updateBalance());
}
console.log('component ran')
}, [dispatch]);
return (
<>
{balance.value ?? 0}
</>
);
}

在updateBalance操作中，您应该将余额状态设置为"正在获取"并调用api。api调用完成后，可以将余额状态设置为"已提取"，并将余额值设置为已提取值。我就这么想。