Redux 4탄 - Store의 등장

간단히 3탄을 복기 하고 넘어가보쟝!

저번 시간에는 모듈을 완성했다!

모듈에는 액션 타입과 액션 생성함수, 리듀서 가 들어있다!

 

여기까뤼~ 

 

이제 본격적으로 만들었던 모듈을 사용해봅시댜!

 

는 ~

들어가기에 앞서서 하나만 더 짚고 넘어가겠슴다!

---

1. Reducer가 여러개라면 ?

 

지금은 모듈이 하나지만, 우리가 State 하나로만 모든걸 해결하지 않듯이

추후에는 하나의 프로젝트에서 여러개의 모듈을 만들게 될것이고 또 그렇게 할겁니다. 아마도여~

그렇다면 당연히 Reducer도 여러개 생기겠네유~

 

그런경우에 우리는

여러개의 Reducer를 하나로 합쳐서 관리할 수 있슴다 ~

따라오세여~

 

우리 모듈파일 있는곳( modules디렉토리 ) 에다가 파일하나 더 만듭시댜!  파일명은 알아서들 하슈

그리고 이렇게 작성했습니다.

짜잔~ 위에부터 차근히 봐보면

 

첫줄에는 combineReducers 라는 친구가 보이네요 ~  영어단어의 뜻 그대로 리듀서들을 합쳐주는 친구인가봐요~

redux로부터 땡겨온 모습입니다~

 

다음줄에는 아까만든 Reducer함수인 cartQuan 친구도 보이네요 ~

같은경로의 cartQuan.js 로부터 땡겨온 모습입니다~

 

다음줄에는 3탄에선 없었지만 제가 따로 만든 Reducer함수인 detailQuan 친구도 보입니다.

역시 같은경로의 detailQuan.js 로부터 땡겨온 모습입니다~

 

그다음엔 아까 땡겨온 combineReducers 친구를 사용해 제가 만든 Reducer 함수들을 하나로 합쳐준 뒤 

rootReducer 라는 친구를 선언해서 그 안에 넣어줬군요 ~

 

마지막으로 export default 로 밖으로 던져버렸네유~

 

 

이렇게 우리는 여러개의 Reducer를 합쳐 rootReducer에 저장했슴다.

---

2. 합친 이유 + Store 만들기

Store는 계속 안알려주고 

도대체 왜! 빙빙돌아 엄한 Reducer들을 합치고 왔는지....

이유와 함께 지금 만나러 갑니다....

 

 

자 ! 우리는 알고있슴다!

하나의 프로젝트에서 Store는 단 하나여야 한다는 것!        ( 하지말라면 하지마세요^^ )

또한 Store는 State를 보관하는 창고 라는 것!

말입니다.

 

 

 

 2가지를 잘 기억하면서 Store를 만들러 가봅시다!

 

 

src 디렉토리에 있는 index.js 로 가봅시다 !

그리고는 이렇게 입력을 했슴다

위에서 아래로 차근히 코드를 봐봅시다.

 

Provider 라는 녀석을 react-redux로 부터,             

createStore 라는 녀석을 redux로 부터 땡겨왔네요 !    

아까만든 rootReducer도 땡겨왔구요 ~

 

createStrore함수의 parameter로 rootReducer를 인자로 넣어 드디어 !!!!

store를 만들었습니다!!!

 

 

떠올려 봅니다.....

 

1. Store는 단 하나여야 합니다.

2. Store는 State를 보관하는 창고입니다.

 

그리고....

3. Reducer함수들은 항상!!! State를 return합니다!

 

 

그렇슴다!

1개의 Store안에 여러개의 Reducer들( State ) 을 담기위해 1개로 합쳤던 것입니다아~

의문이 풀렸슴다.. 넘어갑시다.

 

 

이제 이 모든 과정을 거치는 이유를 생각해보세유~

 

우리가 원하는건

"어떤 Component에서든지 State의 데이터를 마구마구 가져다 쓰고싶다!" 입니다.

 

해봅시다.

App을 render하고 있는 코드 아래쪽 부분

Provider라는 컴포넌트로 App컴포넌트의 앞뒤를 감싸주었슴다. 

그리고

Provider의 props로 조금전에 만든 store를 넣어줬슴다.

 

이렇게 해서 드디어~~~

 

App Component에 속한 모든 자식 Component에서

store에 들어있는 State 값에 접근할 수 있게 됐습니다!! 

 

 

이제 거의 모든 개념이 등장했슴다.

남은 것은 dispatch와 subscribe !

 

 

이어지는 5탄에서는 남은 두 친구들을 사용해서

드디어 State를 사용하고 변화시켜 보겠습니다.

 

 

 

끝!