#26,27 Redux 기본 설정

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다.

 

 

Redux란?

predictable state container for JavaScript apps. 상태관리 라이브러리

 

 

Props VS State

Props	State
부모→자식으로 전달만 가능하다.	각 컴포넌트 안에서 state를 통해 데이터를 전달받아 사용가능하다.
전달받은 데이터는 수정불가능	데이터 수정 가능, 데이터 수정시 리렌더링됨

 

 

1. react-redux, redux-promise, redux-thunk 설치하기

cd client
npm install react-redux redux-promise redux-thunk --save

*redux-promise, redux-thunk (redux middleware)가 필요한 이유?

• redux는 action을 통해 store 내부의 데이터를 변경한다.
• action이 객체형태일때만 store가 받을 수 있지만 action이 promise나 function 형태로 받아지는 경우도 있다.
• 이런경우를 대비하기위해 redux-promise와 redux-thunk를 사용한다.
  redux-promise: promise가 왔을 때 어떻게 받아야하는지 알려줌
  redux-thunk: function이 왔을 때 어떻게 받아야 하는지 알려줌

 

2. src/index.js 파일에 redux 구문 추가하기

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

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


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

, document.getElementById('root'));

 

3. _reducers/index.js 파일 생성하기 (여러 Reducer를 모아주는 역할)

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
	
})

 

4. 크롬에 Redux Devtools 다운받기 (사이트)