react를 통해 redux를 사용하면 action, reducer들을 설정해주었는데 vanilla.js라고 특별하게 다른 점은 없었다. 그러나 connect로 연결해주어 dispatch, state를 가져오는 것이 아닌 store의 특별한 함수를 통해서 가져온다. 이를 정리 해보겠다. 기존 웹팩 설정을 해주기 귀찮아서 아래의 명령어로 react app을 만들어 주었습니다. yarn add create react-app 폴더 이름 yarn add redux src안에 있는 기타 파일들을 삭제해주었습니다. 안쓸거니깐요! redux 위의 gif를 보면 redux가 있을때와 없을 때의 차이를 확인할 수 있다. 1) without Redux 리덕스가 없으면 스테이트가 변경시 하나하나 거쳐서 변경이 됩니다. 2)..

react-navigation와 Redux연결하기 이전에 react-native와 redux 를 연결한적이 있습니다. 하지만 단일페이지였는데요. 단일페이지에서는 간단히 연결했는데 여러개의 페이지가 존재할 때 어떻게 묶어두어야 할지 생각하게 되었습니다. 찾다가 겨우해결책을 찾아서 적어봅니다. http://hoony-gunputer.tistory.com/171 이전 글에서의 코드에서 변화를 주었습니다. 이전에는 createAppContainer를 바로 export default 해주었습니다. 하지만 redux를 함께 사용해주기 위해선 그러면 안됐다. 내가 찾은 해결책은 class를 만들어 주어서 store를 등록해주고 createAppContainer의 반환값을 반환해주는 방법밖에 없습니다.

redux action연결하기 이전에는 state를 redux를 이용하여 컴포넌트와 연결했습니다. 그럼 이번에는 reducer에 정의한 action을 등록해보겠습니다. 아까전과 같이 index.js 파일에 만들어 보겠습니다. 1. bindActionCreators를 받아와서 reducer에 만들어 놨던 action이름과 매칭해서 연결해줍니다. 2. 등록된 함수가 자동으로 type을 반환해주면서 자동으로 reducer를 실행하게 됩니다. 한마디로 action을 전달해줄 때 마다 자동으로 reducer가 실행됩니다. type에 맞추어서 등록된 함수가 실행됩니다. 3. Timer 클래스에서 확인 이전과같이 props에서 받아오면 됩니다. props에서 등록된 action들을 받아오며 함수실행 시키듯이 실행하면..

App.js 스토어를 연결해줍니다. redux와 react-redux에서 createStore, Provider등을 가져와서 스토어를 만들어주고 reducer를 넣어주어서 연결시켜줍니다. 그리고 Provider에 store에 넣어줍니다. 그리고 여기서 Timer를 호출하면 Timer폴더에 index.js가 실행됩니다. Timer 컴포넌트는 이러한 파일 구조를 가지고 있습니다. 우선 index.js파일에서 connect를 불러옵니다. connect에 presenter에 있는 Timer클래스를 불러오고 state를 반환해주는 함수를 등록해줍니다. 여기서 log를 찍어보면 reducer에서 등록해놓은 state를 확인 할 수 있습니다. 그리고 연결해준 Timer에 가서는 일반적으로 state를 받듯이 prop..

Reducer파일 만들기 ducks패턴을 사용하여 redux사용해보기 리덕스에서 saga thunk ducks등 다양한 패턴을 적용할 수 있다. 다 각각의 단장점 들이 있어서 상황에 맞게 사용하면 될것 같습니다. 오늘은 ducks 패턴을 사용해보겠습니다. ducks는 이전에 일일히 액션과, reducer, 기능들을 다양한 폴더에 나누어서 사용하게 되어있었다. 그래서 하나의 기능을 수정할 때 다양한 파일에 들어가 수정해야한 다는 단점이 있었습니다. 이러한 문제점을 해결하기 위해 ducks구조가 나온 것입니다. 덕스 구조는 필요한 것들을 불러오기 액션을 정의 액션 크리에이터 정의 리듀서 정의 리듀서 함수 만들기 Export action Created Export reducer 아래와 같은 형태로 되어있고 d..

Redux Redux는 글로벌 하게 state를 관리하기 위해 만들어진 라이브러리 입니다. 간단한 리액트 프로젝트에서 사용하기에는 불필요할 수 있지만 규모가 커진 프로젝트에는 그만큼 리액트를 효율적이게 사용할 수 있게 도와줍니다. 리덕스 없이 평소에는 스테이트의 값을 전달해주기 위해 props로 계속해서 전달해주고 전달해주는 부모 컴포넌트에서 부터 자식 컴포넌트로 계속해서 전달해주는 방법을 써야합니다. 아래 gif를 보면 이해가 갈것입니다. WithOutRedux 리덕스가 없을 때는 다른 컴포넌트의 스테이트의 변화를 거쳐서 거쳐서 전달을 해주고 있습니다. 하지만 리덕스와 함께라면 WithRedux 하나의 스테이트의 변화에 하나하나 거치지 않고 다른 컴포넌트에게 변화 된값을 전달해줄 수 있습니다. 출처) ..