[Node.js] Redux

리덕스 학습 블로그 참고

(1) props와 state

props

• properties의 줄임말
• 부모와 자식 컴포넌트 간 무언가를 주고 받을 때 사용 (부모에서 자식으로)
• props는 변할 수 없음 (ex, 부모에서 자식으로 1이라는 값을 내려줬을 때, 자식에서는 1을 바꿀 수 없음)

state

• state는 컴포넌트 안에서 값이 변할 수 있음
• 값이 변할 때는 리렌더링 되는 것임
• 리덕스는 이러한 state를 관리해주는 툴!

---

(2) Redux

Redux란 상태관리 라이브러리이다.

Redux의 데이터 Flow (unidirectional)

리덕스의 데이터는 한방향으로만 흐른다.

1. 하나의 중앙 데이터 store를 갖습니다. (이때 데이터는 state(상태)를 말합니다.)
2. 상태값을 변경해야할 때 데이터들의 state 값을 수정해줄 reducer 함수를 만듭니다.
3. dispatch를 사용하여 reducer에게 state 값을 수정하라고 action 값과 함께 요청합니다.
4. reducer가 state값을 수정하면, subscribe를 사용하여 수정된 부분을 UI에 업로드합니다.

action

• 객체로 되어있음
• 무슨일이 일어났는지 설명하는 객체
• ex. (1) {type: 'LIKE_ARTICLE', articleId: 42}
• articleId 42번은 type에 의해 LIKE_ARTICLE이라고 설명한다.
• ex. (2) {type: 'FETCH_USER_SUCCESS', response: {id:3, name:'gyul'}}
• id가 3번이고, 이름이 gyul이라는 유저의 정보를 가져오는데 성공했다고 설명한다.

Reducer

• (previousState, action)=> nextState
• ex) 원래 3이었던 previousState가 action에 의해 5(nextState)로 변했다.
• 즉, 이전 state과 actionObject를 받은 후에 바뀐 state를 return해주는 곳

Store

• 모든 state를 감싸주고 있음
• store의 state를 바꾸고 싶다면 dispatch를 이용하여 action으로 변경시킬 수 있음
• 📢 그런데 store에서 객체 형태가 아닌, promise나 function 형식으로 받을 수도 있음
• 이렇게 되면 store가 받지를 못함 !! ❌
• 그래서 redux-promise와 redux-thunk를 redux설치할 때 같이 해줌
• npm i redux react-redux redux-promise redux-thunk --save

📖 redux-thunk

• dispatch에게 어떻게 function을 받는지 방법을 알려줌

📖redux-promise

• dispatch에게 promise가 왔을 때 어떻게 대처해야 하는지 알려줌

👩🏻‍💻 둘다 리덕스를 더 잘 사용할 수 있도록 하기 위한 middleware !!

---

(3) Redux 설치 후

1. App에 리덕스를 연결시켜주기 위해서 Provider로 감싸준다.

⭐ client > index.js

import { Provider } from 'react-redux'

root.render(
  <Provider>
    <App />
  </Provider>
);

2. redux-promise와 redux-thunk,store을 정의한다.

⭐ client > index.js

import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk'

const createStoreWithMiddleware= applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);

root.render(
  <Provider store={createStoreWithMiddleware}>
    <App />
  </Provider>
);

3. reducer 및 redux extension 연결

⭐ client > _reducers > index.js

import { combineReducers } from "redux";

const reducers= combineReducers({
})

export default reducers;

👩🏻‍💻여기서 combineReducers은 무엇일까?

하나의 sotre 안에는 여러개의 reducers가 존재할 수도 있다. 예를들어, 유저 정보 reducer, 게시글 정보 reducer 등등 그런데 store에서 단 1개의 reducer만 받을 수 있기 때문에 combineReducers을 이용하여 root reducer에서 하나로 합쳐주는 것이다.

⭐ client > index.js

import Reducer from './_reducers';

const createStoreWithMiddleware= applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);

root.render(
  <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ 
  && window.__REDUX_DEVTOOLS_EXTENSION__())}>
    <App />
  </Provider>
);