Redux Toolkit + Redux Saga 구조 만들어보기(2)

설치를 했으면 구조를 만들어 보자 (설치 명령어는 이전 글에 있습니다.)

[폴더 구조]

우선 디렉터리 구조를 보면 대표적으로

 

src/api/

src/components/

src/views/

    viewName/

        index.js

        slice.js

        saga.js

src/store/

src/App.js

src/index.js

 

이전에는 actions, reducers, constants 등 각 기능 별로 폴더를 나누었을 것이다. 그러나 redux-toolkit에 createSlice가 actions 와 reducer을 한 방에 만들어주면서 디렉터리 구조가 좀 더 보기 쉽게 구성이 가능해 졌다. 그리하여

views 에 한 화면당 폴더를 만들고(viewName) 그 폴더에 view파일(index.js) + slice(actions+reducer) + saga 파일을 한꺼번에 묶는것이 권장되고 있다 (이러한 패턴을 ducks 패턴 이라고 한다.)

(보통은 views라고 안하고 features라는 폴더로 만들어 쓰이고 있다. 난 그냥 내 소스니까 내 맘이다 ㅋ)

 

우선 api를 작성해 보자

api/index.js

getMasterStopCodeList() 라는 조회성 함수를 만들어준다. (서버에서 페이징 처리를 하고있어 필자는 pageable 파라미터를 추가했을뿐 생략해도 무관하다.)

 

그 다음은 slice.js 파일을 완성해 보자

[ src/views/viewName/slice.js ] - Redux-Toolkit 설정

1. initailState 작성

state 값으로 사용할 값을 선언해준다. 

 

2. reducers 안에 우리가 dispatch하여 사용할 함수를 정의해준다. 

미리 설명을 해준다면

우리가 만약 화면에서 load 함수를 dispatch하여 호출한다면 payload 로 받아온 값이 state.searchParam에 들어간다.

그리고나서 saga에서 load함수를 catch하여 api를 호출하여 조회된 값을 받아오고 loadSuccess를 saga에서 호출하여 데이터를 넣어주는 구조로 되어있다.

initialState , reducers 작성

3. 변수 정의와 reducers 정의가 끝났다면 현재 Slice의 name과 createSlice로 slice를 묶어주고 createSelector를 통하여 데이터를 적재시켜 준다.

 

name, slice 및 Selector 작성

 

4. selectAllState는 3번에서 만든 Selector들을 묶어서 가지고있다고 생각하면 될꺼같다. (import시에 편하게 불러 쓰기위함)

 

5. export const MasterStopCodeSelector 부분을 보면 선언된 이름으로 import 하여 사용할 수 있다. all만 사용하여 import시에 원하는것만 뽑아서 사용해도 되지만 혹시나 필요한것만 사용할 수도 있을꺼 같아 써주었다.

 

6. 마지막으로 slice.name , slice.reducer, slice.actions 를 정의하고 끝낸다. 

selector 모음 , 및 name,reducer,actions 선언

[ views/view/viewName/saga.js ] - Redux-Saga 설정

그 다음은 saga.js 파일을 완성해 보자

 

1. saga에 필요한 함수 , api , slice를 import 해준다.

2. 하단에 export function* watchMasterStopCode() 를 작성해준다. 

 

saga의 흐름을 설명해주자면

(1) 화면에서 load 액션이 호출

(2)  export function* watchMasterStopCode() 가 takeLatest 에 있는 load함수를 인식함과 동시에 selectMasterStopCodeList()를 실행

(3) yield select()를 사용하여 Selector의 데이터(MasterStopCodeSelector.searchParam)를 가져와서 const param에 적재

(4) yield call() 함수를 사용하여 api 호출(getMasterStopCodeList)하고 결과값을 result에 저장

(5) yield put()를 이용하여 yield call()호출이 끝나고 loadSuccess함수를 호출

(6) slice에 있는 loadSuccess가 실행되면서 state값을 업데이트시켜준다.

 

 

views/view/viewName/saga.js

[ store/index.js ] - toolkit + saga

아래 이미지를 보면 하단에 createStore 부분을 redux-toolkit에서 제공해주는 configureStore() 함수를 이용하여 store를 생성해준다.

그리고 sagaMiddleware.run(rootSaga) 을 통해 saga 미들웨어를 실행시킨다. 

 

store/index.js

 

App.js파일을 열어본다. (참고로 필자는 MaterialUI를 사용한 layout를 쓰고있어 Router부분이 처음하는 분들과 다를수있다. )

App.js

 이렇게 만든 createStore를 통하여 App.js에서 store를 생성 -> Provider 컴포넌트에 prop으로 내려줌으로써 모든 설정이 끝난다.

 

참고 : soyoung210.github.io/redux-toolkit/tutorials/basic-tutorial

Redux Toolkit