Redux란?

---

상태 관리 라이브러리. JavaScript 프로그램을 위한 예측 가능한 상태(State) 컨테이너

State을 관리해주는 툴

부모 컴포넌트, 자식 컴포넌트, 그 자식의 컴포넌트가 있다고 가정했을 때, 모두가 공통적으로 관리하는 데이터가 있다고 해보자

Redux를 사용하지 않으면, 자식의 자식 컴포넌트에서 해당 데이터를 업데이트 시켰을 때, 그 상태 정보를 부모 컴포넌트에 전달하고 또, 부모 컴포넌트의 부모 컴포넌트에서도 전달을 해주어야 한다. 즉, 거치는 과정이 복잡하다.

하지만, Redux를 사용하게 되면, Redux Store가 해당 데이터의 상태를 관리해주어 복잡한 과정을 거치지 않고 Store에 대한 상태만 업데이트 시켜주면, 보다 더 원활하게 상태 관리를 수행할 수 있게 된다.

Props vs State

---

Props

• 프로퍼티의 줄임말
• 컴포넌트 간의 통신을 할때 Props를 이용해야 함
• 통신 방법은 위에서 아래(부모 -> 자식)
• 부모 컴포넌트에서 자식 컴포넌트로 전달한 값은 자식 컴포넌트에서 변경할 수 없음

<ChatMessages //자식 컴포넌트
	messages={message}
	currentMember={member} //부모 컴포넌트로부터 전달받은 정보
/>

State

• 컴포넌트 내에서 데이터를 교환할 때 사용
• 전달받은 값을 변경할 수 있음
• 값이 변화할 때 리렌더링이 수행됨

state={
    message:'',
    attachable:undefined,
    openMenu:false
};

Redux 데이터 Flow

---

한 방향으로만 흐르는게 포인트

Action: 무엇이 일어났는지를 설명해주는 객체

{type: 'LIKE_ARTICLE',articleId:42} //42번 기사에 좋아요를 누름
{type: 'FETCH_USER_SUCCESS',response:{id:3,name:'Mary'}} //유저 가져오는 것 성공
{type: 'ADD_TODO',text:'Read the Redux docs.'} //해당 텍스트를 todo 리스트에 추가

Reducer: Action에 의해 어플리케이션의 상태가 어떻게 변화했는지 알려주는 기능. 이전 상태와 바뀐 상태를 리턴

(previousState,action)=>nextState

Store: 전체적인 어플리케이션의 상태를 감싸줌. 안에 메서드들이 있는데 메서드들을 통해 상태를 관리할 수 있음

Redux 세팅

---

cd client로 폴더 이동 후

npm install redux react-redux redux-promise redux-thunk --save로 필요한 dependency들 설치(redux를 잘 사용할 수 있게 도와줌)

redux-promise: dispatch(action)에, promise를 받는 방법을 알려줌

redux-thunk: dispatch(action)에, function을 받는 방법을 알려줌

index.js

import {Provider} from 'react-redux';
import 'antd/dist/antd.css';
import { applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import reduxThunk from 'redux-thunk';
import Reducer from './_reducers';

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

ReactDOM.render(
   //redux와 어플리케이션 연결. 현재의 어플리케이션을 감싸줌
  <Provider
    store={createStoreWithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
  >
    <App />
  </Provider>,
  document.getElementById('root')
);

//생략

./reducers/index.js

//여러개의 Reducer를 combineReducers를 이용해서 하나로 합쳐줌
import {combineReducers} from 'redux';
//import user from './user_reducer';

const rootReducer=combineReducers({
    //user,
});

export default rootReducer;

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본