我们应该在多个地方渲染 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;

这是余额的代码

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

您可以在任何需要的地方渲染平衡组件。平衡组件看起来像这样。

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 操作中，您应该将余额状态设置为 'fetching' 并调用 api。 api调用结束后，可以将余额状态设置为'fetched'，将余额值设置为获取的值。我猜的就这些了。

我们应该在多个地方渲染 React 组件吗？

Should we render react component at multiple places?

reactjs

react-redux

react-hooks

redux-toolkit