Redux

: 리덕스는 가장 사용률이 높은 상태관리 라이브러리로써 복잡한 컴포넌트 구조속에서 보다 간편하게

모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다.

돌아보자 ~ 리액트는 Props와 State가 있다. Props는 부모에서 자식컴포넌트로 단방향으로 내려가고 바뀔 수가 없다ㅠㅠ State는 컴포넌트 반대로 안에서도 state를 변하게 한다!! re-render!

Centralizing application state

사실은 로그인 뿐만아니라 라우트한 모든페이지에는 authenticate가 필요하다!

(그전에는 부모인 app에 authenticate를 만들고 props로 하나하나 넘겨줬음.. 😂)

but 한 저장소에 state를 저장한 후에 나눠주는 방식을 리덕스가 해준다!

여기서 헷갈릴 수 있는 부분 !!

컴포넌트가 store값을 다이렉트로 요청하지 못함..ㅠ

리액트 훅 ?

useDispatch. useSelector을 이용 !

useDispatch : 액션에 전달하는 역할

useSelector : store에 있는 값을 가져오는 역할

시작 ~

리덕스 설치

$ npm install redux

좀더 리액트에 가까운 리액트리덕스도 설치 ! (엄연히 다르다..)

$ npm install react-redux

리덕스 셋팅은 번거롭다 … 🤪

reducer, action, store 설정을 해야함

import { Provider } from "react-redux";

<Provider store={store}>
    {/* <PersistGate loading={<Loading />} persistor={persistor}> */}
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
    {/* </PersistGate> */}
  </Provider>

provider로 index.js 감싸주기 !

스토어,리듀서도 따로 만들어줘야합니다.

store.js / reducer.js 생성 후 작성

리듀서는 스토어를 바꾸는 funtion 함수이다 !!!(state 바꿈)

action은 그냥 객체(useDispatch활용)

액션 (Action)

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다.

type을 필수로 넣어주기 !

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

**액션 생성함수 (Action Creator)**

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}
이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용합니다.

리듀서 (Reducer)

리듀서는 변화를 일으키는 함수입니다.

reducer.js 참조

예시1, 2

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

function userReducer(state = initialState, action) {
  switch (action.type) {
    case SET_USER:
      return {
        data: action.data,
      };
    case UNSET_USER:
      return {
        data: null,
      };
    default:
      return state; //기본값
  }
}

export default userReducer;

//리듀서는 함수, 리듀서는 state, action 2개의 매개변수!!
//리듀서는 초기 설정 필요!

리듀서는 행동지침 ! 스토어를 설정하는 역할 !

이후에

useSelector로 store에 있는 데이터를 가져오자!

const count = useSelector((state) => state.count);

<h1>{count}</h1>

나타냄 !

리덕스에 가장 큰 장점은 부모건 자식이건 상관없이 상태관리 가능! 😊

⇒ 어느 컴포넌트에도 적용가능 (props보다 좋음 ㅎ)

payload

: dispatech에서 데이터를 넘겨주는역할, 선택사항 !

⇒ 로그인을 한다고 가정하면 id, password를 보내주는 중요한 역할!

const login = () => {
	dispatch({type:"LOGIN", payload:{id:"noona", password"123"}});
};

리듀서에서는 LOGIN이 case가 추가됌

case "LOGIN";
	Return {...state, 
id: action.payload.id,
password: action.payload.password,
};

보는거와 같이 action은 객체이다 ~~ 기억~!

id와 password를 action payload로 바꾼다는 내용 추가함

⇒ useSelector로 가져온다 !(ui에 보여준다 !)

🤪 리덕스 미들웨어

리덕스에는 한가지 단점이 있다….

그것은 바로 동기적으로.. 순차적으로 진행이된다…ㅠㅠ

프론트엔드에 꽃은 api요청 !!

백엔드에서 데이터가 오면 그 api를 보여줘야한다!!!!

서버에 데이터를 요청하고 받아올때까지 기다려야한다

그 작업을 비동기로 처리해야한다 !!! async

그래서 나온것이 리덕스미들웨어 ~

async 비동기로 진행해보자 !

미들웨어는 중간에서 가로채는 느낌

가로채서 비동기처리를 하게 해줌

redux-saga / redux-thunk ⇒ 두가지에 리덕스미들웨어 라이브러리가 있다.

좀 더 쉬운 redux-thunk를 해보자~

$ npm install redux-thunk

https://github.com/reduxjs/redux-thunk

<참고>

thunk는 함수를 리턴한다.