Final project - Dev7

Jaemin Jung·2021년 9월 12일
0

Final Project

목록 보기
7/27

Redux 공부 2일째

어제 Redux에 대해서 개념을 정리 해보고 html에서 연습도 해봤다.
어느정도 로직이 이해가 되었지만, 직접 설명하라고 하면 못 설명한다..
어쨌든 오늘도 공부를 이어 나갔다.

우리가 생각한 로직

  1. reducers폴더 내부에 initailState에 내가 원하는 state를 키 벨류 형태로 작성한다.

  2. actions.js에 state를 변경시킬 행동(action)을 만들어야함 기존 코드 참고해서 작성

  3. reducers폴더 내부에 index.js에 action을 받을 reducer를 함수형태로 작성
    첫번째 인자는 state, 두번째 인자는 action
    작성이 완료 되면 제일 상단에 rootReducer 안에 작성한 reducer 함수명 추가

  4. 컴포넌트에서 사용하려면 기존 js파일에서
    import { useSelector, useDispatch } from 'react-rdux'
    import { 내가 필요한 action } from '상대경로 + /Redux/actions/actions'

const state = useSelector(state => state.내가 가져올 리듀서 함수명)

const {state 키값} = state;
구조분해 할당 해줌 왜냐면 state는 객체 형태이기 때문

{state 키값}
state 적용

state 변경을 하기 위해서는 먼저
const dispatch = useDispatch() 선언

값이 변경되는 예시
dispatch(action(변경되는값))

이러면 state 핸들링 성공!

팀원 친구분 도움

profile
내가 보려고 쓰는 블로그

0개의 댓글