TIL27 Redux

shnae·2023년 11월 27일
0
post-thumbnail

backend

  1. npm init -y
  2. "main": "app.js"
  3. git init
  4. npm i express

Redux

사용하는 이유: Redux가 없을 때에는 React가 렌더링과 데이터 관리를 다 하게 되지만, 컴포넌트가 많아지게 된다면 데이터를 주고 받는 데 어려움이 발생하기 때문에 Redux와 React의 역할을 분류해 준다
reducers - 생성된 경우에 사용함
extraReducer - 갱신되는 경우에 사용함. Thunk를 사용해 비동기 3가지 상태를 만들어줘야함.

  • App에서 데이터를 자식컴포넌트에 props로 넘겨준다

  • 자식 컴포넌트가 많아지면 데이터를 props로 받아서 쓰는게 복잡해진다
  • Redux를 통해 데이터를 따로 관리하는 라이브러리를 만들어주고, React를 통해 렌더링만 진행하여 효율성을 높인다

appSlice

thunk, slice 는 한묶음

  • 백엔드에서 받아온 return 값은 appSlice의 builder.addCase의 action에 담겨있다

createAsyncThunk

thunk -> redux로 비동기 처리하는 것!

  • 1번 thunk -> appSlice에 부착해준다
    • appThunk의 return 값은 appSlice의 action.payload에 들어있음

useDispatch

  • react component 에서 thunk 함수로 인자를 보낼 때 dispatch를 사용함

0개의 댓글