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
superfly