React Apple Accessories Cart 구축 방법(사용자 지정 후크 및 브로드캐스트, 플러그인 없음)

이 데모는 변경 사항을 처리하는 리듀서, 구성 요소 간에 데이터를 공유하는 컨텍스트 및 구성 요소 간의 상태를 유지하기 위한 브로드캐스트 채널을 구현하는 사용자 정의 후크로 상태를 관리하는 방법을 보여줍니다. 실제로 단일 사용자 정의 후크를 사용하여 원하는 만큼 많은 하위 상점을 만들 수 있습니다. 예를 들어 제품용 하나, 주문용 다른 하나 등입니다. 각 하위 상점은 고유한 채널과 컨텍스트를 가질 수 있습니다. 타사 플러그인을 사용하지 않고 탭 간에 상태를 유지하는 유연한 저장소를 구축하려는 경우 이 데모가 유용할 수 있습니다.

이 프로젝트의 코드는 Github에서 찾을 수 있습니다.

See this code in action at Vercel

커스텀 훅 만들기
상점 코딩부터 시작하겠습니다. 저장소는 리듀서 저장소, 컨텍스트 저장소 및 로컬 저장소를 통해 세 가지 방식으로 상태를 관리합니다. 리듀서 저장소는 주문과 같은 변경 사항을 처리하고 컨텍스트 저장소는 상태 복사본을 유지하므로 구성 요소 간에 데이터를 공유할 수 있고 다른 복사본이 로컬 저장소에 주입됩니다. 따라서 페이지를 새로고침할 때마다 데이터가 그대로 유지됩니다.

   const [ state, dispatch] = useReducer(storeReducer, initialState);

   // backup state for sharing data between components
   const { setContextState } = useContext(Context);

   // broadcast channel
   const channel = new BroadcastChannel( channelName );     

채널을 사용하여 메시지를 보내고 들어오는 게시물을 들을 수 있습니다. 메시지가 도착할 때마다 로컬 저장소, 컨텍스트 저장소 및 감속기 저장소를 업데이트하려고 합니다.

channel.onmessage = function(event) {        
  let { data } = event;                  
  saveStateToLocalStore(data);   
  dispatch( {type: 'set', value: data });               
  setContextState(data);
};       

앱이 로드될 때마다 상태가 로컬 저장소에 저장되었는지 확인하고 싶은데 문제가 있는 경우 백업합니다. 이것은 사용자 정의 후크 내부의 useEffect 후크로 수행할 수 있습니다.

useEffect( () => {
  // retrieve state from local storage on load
  const cachedState = getStateFromLocalStore();      
  if(cachedState) {           
    dispatch({ type: "init", value: cachedState });
    setContextState(cachedState);

  // add default state to local storage
  } else {        
    saveStateToLocalStore(initialState);    
    setContextState(initialState);   
  }       
}, [ setContextState ]);

마지막으로 몇 가지 방법을 추가하고 내보냅니다. 사용자 지정 후크는 다음과 같습니다.

export const useStore = (channelName) => {
  const [ state, dispatch] = useReducer(storeReducer, initialState);  
  const { setContextState } = useContext(Context);  
  const channel = new BroadcastChannel( channelName );  

  useEffect( () => {
    // retrieve state from local storage on load
    const cachedState = getStateFromLocalStore();      
    if(cachedState) {           
      dispatch({ type: "init", value: cachedState });
      setContextState(cachedState);

    // add default state to local storage
    } else {        
      saveStateToLocalStore(initialState);    
      setContextState(initialState);   
    }       
  }, [ setContextState ]);

  channel.onmessage = function(event) {        
    let { data } = event;                  
    saveStateToLocalStore(data);   
    dispatch( {type: 'set', value: data });               
    setContextState(data);
  }; 

  const addOrder = product => { .... }
  const removeOrder = (orderID) => {...}
  .....

  return [ 
    state,        
    addOrder,
    removeOrder,
    ...    
  ];
}

이제 모든 구성 요소에서 사용자 지정 후크 또는 컨텍스트를 가져올 수 있습니다. 데이터, 예를 들어 제품을 원하면 할 수 있습니다.

const { contextState: { products } } = useContext( Context );

또는 사용자 지정 후크를 사용하여 데이터를 가져올 수 있습니다.

 const [state] = useStore('store');    
 const { orders } = state;

그런 다음 이를 사용하여 @mui(material-ui)로 체크아웃 페이지를 구축합니다.