Redux사용

송승찬·2020년 9월 1일
0

TIL

목록 보기
14/52

Redux사용 후기

  • 어쩌다 사용하게 되었나?

1.리액트 컴포넌트 간의 데이터를 props로 관리하려 시도

2. 댓글을 생성하려 하는데 이용하는 <Comment comment={commentInfo}/>라는 컴포넌트가 있다 해보자, 댓글은 크게 댓글과 대댓글로 나뉘고 댓글은 <SingleComponent/> 대댓글은 <ReplyComment />에서 다룬다고 할 때 <Comment />컴포넌트의 props.comment를 참조해 각각의 컴포넌트를 생성한다 할 때는 props를 통해 데이터 전달이 용이

  • 이처럼 컴포넌트 간의 관계가 명확히 드러나고 연관성이 있다면 props를 통한 전달이 쉽지만 데이터를 전달시 연관성이 없는 컴포넌트 간의 연결은 어떻게 해야할까?를 고민

  • 한 곳에서 데이터를 관리해야겠다 생각->리덕스를 찾음

리덕스의 동작 방식

1.액션 객체 생성(액션 명령어와 액션 행동을 정의)

action type(명령어)
export const USER_LOGIN = 'USER_LOGIN'

action creators(액션 메서드)
->리듀서로 데이터 생성 요청 기능한다
->대부분 로직을 여기서 처리
export function complete({id}) {  
    return { type: USER_LOGIN,id};
}

2.리듀서가 액션 객체를 받고,액션의 타입에 따라 state다르게 변경, 이 때 상태가 추가되는 것이 아닌 덮어씌워지게 되므로 전체 상태를 복사하여 상태를 갱신한 후에 반환해야
이 때 ...state같이 spread operator를 이용하여 전체 상태를 복사한다.

즉, 저장소에 {id: 1, name: 'Seoul'} 이 저장되어 있는 상태에서 리듀서가 {id: 2} 를 반환하면 저장소에는 {id: 2}만 저장된다

const AuthReducer = (state={},action) {
	switch(action.type) {
    //action.type에 따라 state변경이 달라짐
    	case LOGIN_USER:
        	return {
            	...state,
                // 기존의 state로 덮어씌우는 과정
                id : action.id 
                //action creator가 전해준 id
            },
        default:
        	return state;
    }
}

3.리듀서에 의한 바뀐 state가 redux store에 반영

단점

  • 이 과정은 모두 동기적으로 일어난다.외부에서 데이터를 가져오는 경우 순수 리덕스 흐름만으로는 해결할 수 없다.

해결방안

  • 액션에서 미들웨어 개념을 이용해 비동기 로직을 끼워 넣을수 있게 하였다.

미들웨어의 대표적인 예시

  • redux-thunk
  • redux-saga
profile
superfly

0개의 댓글