redux for 주희

1. Redux and Redux saga
안재용,help@birdsfree.com

2. Redux 는?
액션으로 스테이트를 변경해주는 역할.
리덕스는 크게
이렇게 구성되어 있음 Action, Reducer , Store
-Action: 어떤 행동을 하기 위한 단순히 객체데이터 e.g: { type: 액션이름 , 변수: ..,
변수.. }특징으로는 항상 type 이라는 곳에 액션 고유 이름을 선언한 다는 것. (이것
으로 액션을 보낼 곳에서 어떤 액션이 들어왔는지 인식함)

3. 첫 번째, Action
-Action: 어떤 행동을 하기 위한 단순히 객체데이터 e.g: { type: 액션이름 , 변수: ..,
변수.. }특징으로는 항상 type 이라는 곳에 액션 고유 이름을 선언한 다는 것. (이것
으로 액션을 보낼 곳에서 어떤 액션이 들어왔는지 인식함)
여기서 중요한 것은 간혹 코드에 보이는 Type safe를 위해서 사용된 코드와는 상관
없는 type 임. 그저 액션에 대한 고유한 명을 전달하기 위해서 정해진 type이라는
key,value 의 key 값임

4. 두 번째, Reducer
리듀서는 그저 이전에 있던 state 를 새로운 state 로 변경 해주는 역할.
예를 들어서 이전 state 가 {myName : “i’m crazy” } 고 내가 원하는 것은 이 스테이
트를 변경하고자 하면{myName:”i’m not crazy” yourName:”you are crazy”} 라고
바꾸는 역할이 reducer 의 역할.
코드에서 선언은 보통 이렇게 되어있음. (이그나이트의 redux 폴더 참고).
export const request = (state: Object) => state.merge({ fetching: true })
이전 state 가 저렇게 들어오면 fetching 이라는 새로운 값을 이전 스테이트
(state:Object) 에 저장해서 넘겨줌.

5. 두 번째, Reducer
리듀서는 앞서 말한 것처럼 저렇게 스테이트 변경을 선언한 뒤에,
export const reducer = createReducer(INITIAL_STATE, {
[Types.LOGIN_REQUEST]: request,
[Types.LOGIN_SUCCESS]: success,
[Types.LOGIN_FAILURE]: failure,
[Types.LOGOUT]: logout
})
이렇게 action 과 매칭해 줘야됨. Types.LOGIN_REQUEST 는 action 을 라이브러리
써서 상수화 한 녀석인데 저 상수 안에는 { type: “login_request_unique”} 같은 값
이 들어있겠다는 것을 대충 예측할 수 있음. 저렇게 상수화 하는 이유는 당연히 위
처럼 key,value 값으로 이루어진 배열로 액션을 계속 호출하기 불편하기 때문임.

6. 여기서 잠깐, ActionCreater 에 대해서 알아보자
(redux/LoginRedux.js 상단 참고) 아래는 액션 선언 코드.
export const reducer = createReducer(INITIAL_STATE, {
[Types.LOGIN_REQUEST]: request,
[Types.LOGIN_SUCCESS]: success,
[Types.LOGIN_FAILURE]: failure,
[Types.LOGOUT]: logout
})
Types.LOGIN_REQUEST 라는 액션상수를 만들어 주는 library 가 있
음.(/Redux/LoginRedux.js 제일 상단 임포트 참고)
import { createReducer, createActions } from 'reduxsauce'
바로 위 코드에 createActions 임.

7. 여기서 잠깐, ActionCreater 에 대해서 알아보자
아래 예제 코드를 분석하면
const { Types, Creators } = createActions({
loginRequest: ['username', 'password'],
loginSuccess: ['username'],
loginFailure: ['error'],
logout: null
})
export const LoginTypes = Types
export default Creators
createAction을 사용해서 위 결과물이 Types.LOGIN_REQUEST 라는 Action 상수가
만들어지는데, createActions 의 loginRequest:[‘username’,’password’] 는 원래
Types.LOGIN_REQUEST ={ type: ‘loginRequest’ username:”” password:””}
이랑 같음. 상수에다가 저렇게 액션을 매칭해서 만들어 줌.

8. 마지막 store
store 는 별거 없음. reducer 랑 action 을 선언한 뒤에 보통
이렇게 매칭해주는데
export const reducer = createReducer(INITIAL_STATE, {
[Types.LOGIN_REQUEST]: request,
[Types.LOGIN_SUCCESS]: success,
[Types.LOGIN_FAILURE]: failure,
[Types.LOGOUT]: logout
})
만들어둔 리듀서랑 액션은 액션상수:리듀서 로 위처럼 매칭함. 그리고 createReducer
로 리듀서를 만들고 , 위 리듀서는 INITIAL_STATE를 액션에 따라서 리듀서를 호출해서
변경해주는 것임.

9. 마지막 store
store 는 간단함. reducer 랑 action 을 선언한 뒤에 보통
이렇게 매칭해주는데 (redux/LoginRedux.js 참고)
export const reducer = createReducer(INITIAL_STATE, {
[Types.LOGIN_REQUEST]: request,
[Types.LOGIN_SUCCESS]: success,
[Types.LOGIN_FAILURE]: failure,
[Types.LOGOUT]: logout
})
만들어둔 리듀서랑 액션은 액션상수:리듀서 로 위처럼 매칭함. 그리고 createReducer
로 리듀서를 만들고 , 위 리듀서는 INITIAL_STATE를 액션에 따라서 리듀서를 호출해서
변경해주는 것임.

10. 마지막 store
만들어진 reducer들은 아래처럼 루트리듀서로 합치고, 그 뒤에 이 리듀서를 store 에
넣는 것임.
export default () => {
/* ------------- Assemble The Reducers ------------- */
const rootReducer = combineReducers({
temperature: require('./TemperatureRedux').reducer,
login: require('./LoginRedux').reducer,
search: require('./SearchRedux').reducer,
})
return configureStore(rootReducer, rootSaga)
}

11. 마지막 store
그 뒤 우리는 다양한 리엑트 컨퍼넌트에서 store 에다가 액션을 던지면(dispatch를 이
용해서 던짐.)
그 store에서 우리가 만든 rootReducer 가 그 액션을 감지하고, 매칭되어 있는
Reducer를 호출 하는 것임.!!
Redux End!!
그 다음은 Redux saga 를 설명함.