Question

我想在使用 useReducer 调度事件时阻止重新渲染组件。

首先：我请求API数据，当这个API响应我时，我将state.loadingOrder赋值为“false”。

我检查订单类型，如果订单类型是：2 BannerClient, ClientNameComponent & ModalClient 显示，这个对于最后，只有当状态改变时，BannerClient从另一个API中寻找数据，当数据准备好时，组件使用客户端的数据执行回调。

当我使用 dispatchEvent ({type: 'assignClient', value: client}) 分配 client 时，这会分配客户端属性，但 BannerClient 组件在我发送时向 API 请求另一个请求assignClient 或者，当我从 CustomButton 单击发送 * showClientModal * 时想查看组件时，或者当 Modal 打开并单击“关闭按钮”时，此回调将关闭 Modal，但是一旦此组件请求 API从新启动，就像组件未安装和安装一样。

…
const [myState, dispatchEvent] = useReducer(myReducer, {
loadingOrder: true,
order: {},
loadingClient: true,
showClientModal: false,
client: {},
});
…
const fetchDataFromAPI = async() =>{
  …
  const data = await fetchFuncion();
  dispatchEvent({type: 'assignOrder',value: data});
};
…
useEffect(()=>{
 fetchDataFromAPI();
},[]);
…

return (
  <>
    {
     (!state.loadingOrder && state.order.type === 2) && (
      <BannerClient clientIdToSearch={state.order.clientID} response={client =>{
        dispatchEvent({type: 'assignClient', value: client});
       }}
      />
     )
    }
    {
     (!state.loadingOrder && state.order.type === 2) && (
      <ClientNameComponent name={state.client.name} />
     )
    }
    {
     (!state.loadingClient && state.order.type === 2 && state.showClientModal) && (
       <ModalClient {...state}
         closeModalCallBack={()=>{
          dispatchEvent({type:'toggleModal', value: false});
         }}
       />
     )
    }
    {
     !state.loadingOrder && (
      <MyOrder {...state} />
     )
    }
    <CustomButton
     enable={!state.loadingClient}
     onClick={()=>{
      dispatchEvent({type:'toggleModal', value: true});
     }}
     >
     Show Modal Client
    </CustomButton>
  </>
);

我的 Reducer 如下所示：

 const myReducer = (state = {}, action = {}) => {

  switch(action?.type) {

   case 'assignOrder':
   return {
    ...state,
    order: action.value,
    loadingOrder: false,
   };
   
   case 'assignClient':
   return {
    ...state,
    client: action.value,
    loadingClient: false,
   };

   case 'toggleModal':
   return {
    ...state,
    showClientModal: action.value,
   };

   default:
   return state;
  }

}

Dispatch Reducer 时如何防止重新渲染组件？

0 个答案: