리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기(2)

useEffect를 사용하고 있기 때문에 비동기를 추가해서는 안된다.

useEffect안에 fetch관련 코드를넣고 async/await를 사용할 것.

 

1. 슬라이스 함수에 변수와 상태를 처리해줄 리듀서를 추가

import { createSlice } from '@reduxjs/toolkit';

const uiSlice = createSlice({
  name: 'ui',
  initialState: { cartIsVisible: false, notification: null },
  reducers: {
    toggle(state) {
      state.cartIsVisible = !state.cartIsVisible;
    },
    showNotification(state, action) {
      state.notification = {
        status: action.payload.status,
        title: action.payload.title,
        message: action.payload.message,
      };
    },
  },
});

export const uiActions = uiSlice.actions;

export default uiSlice;

2. useEffect 문안에 dispath로 미리 정의 해둔 리듀서 함수를 이용한다.

- 처음 sending 의 의미로 dispatch를 보내고

- 그다음 fetch한다

- fetch한 response 값이 있다면 에러가 없다고 판단 성공 디스패치를 실행

- reponse.ok가 not이라면 플래그함수를 false라고 했으므로 T/F를 판단해 오류 디스패치 실행

useEffect(() => {
    const sendCartData = async () => {
      dispatch(
        uiActions.showNotification({
          status: 'pending',
          title: 'Sending...',
          message: 'Sending cart data!',
        })
      );
      const response = await fetch(
        'https://react-http-6b4a6.firebaseio.com/cart.json',
        {
          method: 'PUT',
          body: JSON.stringify(cart),
        }
      );

      if (!response.ok) {
        throw new Error('Sending cart data failed.');
      }

      dispatch(
        uiActions.showNotification({
          status: 'success',
          title: 'Success!',
          message: 'Sent cart data successfully!',
        })
      );
    };

    if (isInitial) {
      isInitial = false;
      return;
    }

    sendCartData().catch((error) => {
      dispatch(
        uiActions.showNotification({
          status: 'error',
          title: 'Error!',
          message: 'Sending cart data failed!',
        })
      );
    });
  }, [cart, dispatch]);

 

3. useSelector을 이용하여 리듀서 함수의 작용에 의해 변경된 store안에 state를 이용

- Notfication 컴포넌트는 알림을 출력하는 컴포넌트이다 (성공, 오류, sending)의 값에 따라 다르게 출력함

- 이 다른 변수값으 notfication state값에따라 다르게 출력하는 원리

 

import { uiActions } from './store/ui-slice';
import Notification from './components/UI/Notification';
import { useSelector, useDispatch } from 'react-redux';

 return (
    <Fragment>
      {notification && (
        <Notification
          status={notification.status}
          title={notification.title}
          message={notification.message}
        />
      )}
      <Layout>
        {showCart && <Cart />}
        <Products />
      </Layout>
    </Fragment>
  );
}

 

아직 firebase데이터를 사용하지 않고 있고, 다시 리로드한 상태로 시작하면

데이터가 빈 상태로 시작한다.

물론, 이것은 부수효과 논리를 우리 컴포넌에 넣는 처리 방법 중 하나이고 전혀 문제가 되지 않는다.

하지만 대안은 있다.. 그것은... 다음 포스팅때...