Redux and Redux saga안재용 ,[email protected]
Redux 는 ?액션으로 스테이트를 변경해주는 역할 .
리덕스는 크게
이렇게 구성되어 있음 Action, Reducer , Store
-Action: 어떤 행동을 하기 위한 단순히 객체데이터 e.g: { type: 액션이름 , 변수 : .., 변수 .. } 특징으로는 항상 type 이라는 곳에 액션 고유 이름을 선언한 다는 것 . ( 이것으로 액션을 보낼 곳에서 어떤 액션이 들어왔는지 인식함 )
첫 번째 , Action
-Action: 어떤 행동을 하기 위한 단순히 객체데이터 e.g: { type: 액션이름 , 변수 : .., 변수 .. } 특징으로는 항상 type 이라는 곳에 액션 고유 이름을 선언한 다는 것 . ( 이것으로 액션을 보낼 곳에서 어떤 액션이 들어왔는지 인식함 )
여기서 중요한 것은 간혹 코드에 보이는 Type safe 를 위해서 사용된 코드와는 상관없는 type 임 . 그저 액션에 대한 고유한 명을 전달하기 위해서 정해진 type 이라는 key,value 의 key 값임
두 번째 , 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) 에 저장해서 넘겨줌 .
두 번째 , 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 값으로 이루어진 배열로 액션을 계속 호출하기 불편하기 때문임 .
여기서 잠깐 , 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 임 .
여기서 잠깐 , ActionCreater 에 대해서 알아보자아래 예제 코드를 분석하면const { Types, Creators } = createActions({ loginRequest: ['username', 'password'], loginSuccess: ['username'], loginFailure: ['error'], logout: null})export const LoginTypes = Typesexport default Creators
createAction 을 사용해서 위 결과물이 Types.LOGIN_REQUEST 라는 Action 상수가 만들어지는데 , createActions 의 loginRequest:[‘username’,’password’] 는 원래 Types.LOGIN_REQUEST ={ type: ‘loginRequest’ username:”” password:””} 이랑 같음 . 상수에다가 저렇게 액션을 매칭해서 만들어 줌 .
마지막 storestore 는 별거 없음 . 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 를 액션에 따라서 리듀서를 호출해서 변경해주는 것임 .
마지막 storestore 는 간단함 . 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 를 액션에 따라서 리듀서를 호출해서 변경해주는 것임 .
마지막 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)}
마지막 store그 뒤 우리는 다양한 리엑트 컨퍼넌트에서 store 에다가 액션을 던지면 (dispatch 를 이용해서 던짐 .)
그 store 에서 우리가 만든 rootReducer 가 그 액션을 감지하고 , 매칭되어 있는 Reducer 를 호출 하는 것임 .!!
Redux End!!
그 다음은 Redux saga 를 설명함 .
Recommended
