kkoon9

더 예쁘게 보시려면, www.notion.so/react-redux-Flow-9f2b46e192884bbe8120502f502e0c9a React랑 React+Redux의 결정적 차이 React는 React 컴포넌트 자신이 개별적으로 상태관리를 한다. React+Redux는 상태관리를 하는 전용 장소(store)에서 상태를 관리하고, React 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다. Redux의 전체적인 플로우 Store 2020/09/27 - [Node.js/react] - Redux - Store Reducer Action 2020/09/27 - [Node.js/react] - Redux - Reducer, Action connect 2020/09/28 - [Node.js/react] - R..

React의 Component자체는 Redux의 흐름에 타는 것이 불가능 하다. 흐름에 타기 위해서는 react-redux에서 제공하는 connect라고 불리는 함수를 이용한다. 먼저, Component가 Store로부터 무언가 정보를 받는 경우, 그걸 props를 통해 받는다. props는 immutable 하므로 상태가 변경될 때마다 새로운 Component가 다시 만들어진다 이것을 염두에 둔 후에, connect를 실행하고 있는 주변 코드를 보자. Store가 가진 state를 어떻게 props에 엮을 지 정한다. (이 동작을 정의하는 함수는 mapStateToProps라고 불린다.) Reducer에 action을 알리는 함수 dispatch를 어떻게 props에 엮을 지 정한다. (이 동작을 정의..

1️⃣ Reduce ❗ reducer는 Store의 문지기’라고 생각하면 된다. reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. 2️⃣ Action ❗ Store 및 Store에 존재하는 State에 직접 접근하기 위해 Action을 꼭 거쳐야 한다. Store에 대해 뭔가 하고 싶은 경우엔 Action을 발행한다. reducer가 Action의 발생을 감지하면, State가 경신된다. Action은 기본적으로 {type, payload} 포맷을 갖고 있는 오브젝트가 된다. 다음은 예시 코드이다. reducers/index.js import { combineReducers } from 'redux'; import alert from './alert'; // [..

Store.js import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const initalState = {}; const middleware = [thunk]; // [1]. const store = createStore( // [2] rootReducer, // [4] initalState, composeWithDevTools(applyMiddleware(...middleware)), // [3] ); export def..

redux를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때에는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있다. 우선, 미들웨어가 어떤 역할을 하는지, 그리고 어떻게 작동하는지 이해를 해보자. 미들웨어(Middleware) 이해하기 ❗ Action이 dispatch 되어서 Reducer에서 이를 처리하기 전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면 된다. Thunk ❗ Thunk는 Redux의 미들웨어로서, Action Create를 작성하면 Action 대신에 함수가 반환되게끔 할 수 있다. 또한, Action을 dispatch 할 때, delay를 줄 수 도 있고, 아니면 특정한 조건이 만족되면 디스패치 할 수 있는 기능도 있다. 그..