Redux 란 ? Redux Setting Up - 1

Redux

• 상태 관리 라이브러리
• props ? 부모 → 자식, 변하지 않음
• state ? 컴포넌트 안에서 전달, 변경 가능, 변하면 리 랜더링

 

리덕스의 좋은점은?

컴포넌트로 데이터 전달시 props로 하나씩 타고 올라가면서 주던가 타고 내려가면서 줘야한다.

하지만 리덕스는 리덕스 스토어에 저장하면 직접 접근 가능

 

리액트 컴포넌트 → 디스패치 → 액션 → 리듀서 → 스토어 → 컴포넌트 (한방향)

 

액션?

액션은 객체, 무엇이 일어나는 타입인지 (type), 그밖에 설명, 상태 알려줌

 

리듀서?

리듀서는 이전state가 액션을 만나서 next state(변화가 생긴) 것을 반환

 

스토어?

store는 state를 감싸주는 역할

store안에는 여러가지 메소드가 있는데 이를 이용하여 관리할 수 있다.

 

---

Setting Up

다운 받아야할 Dependency

1. redux

2. react-redux

3. redux-promis

4. redux-thunk

그리고 Redux 기본 주고 scaffolding만들기

(3,4가 필요한 이유는? 리덕스를 잘 쓸 수 있게 도와주는 역할)

 

리덕스 스토어 안에 모든 state를 관리하게 되는데 , store에 state를 변경하고 싶으면 dispatch를 이용하면서 액션으로 변경하면 된다. 근데 action은 객체 형식이어야 받을 수 있는데, store에서 언제나 객체형식으로 받는 것이 아닌 promise형식으로 받을 때고 있고, function형태로도 받을 수 있다.

 

redux-thunk는 dispatch한테 어떻게 function을 받는지 알려주는 것

redux-promise는 dispatch한테 어떻게 promise를 받으면 대처를 하는지

이것들은 리덕스를 더 잘 사용하게 끔 도와주는 미들웨어이다.

 

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

 

---

리덕스 설정

1. index.js에서 Provider import  , 리덕스에서 제공하는 Provider로 감싸기

2. Provider안에다가 store넣기

3. 미들웨어를 이용해야 하기 때문에 import createStoreWithMiddleware, 원래 사용하는 (객체받는) createStroe 가져오기 -> redux

4. import   promiseMiddleware 가져오기 -> redux-promise

5. import   ReduxThunk 가져오기 -> redux-thunk

6. store에 createStoreWithMiddleware넣고 그 안에 리듀서 넣기

7. _reducers 폴더로 가서 임시로 index.js생성

8. combineReducers import하기

9. const rootReducer = combineReducers({}) 만들어서 export하기 

combineReducers? 스토어 안에는 여러개의 리듀서들이 있을 수 있다. 리듀서 안에서 하는 일은 어떻게 state가 변하는지 보여주고 마지막 값을 리턴해줌.  state가 여러가지가 있기 때문에 리듀서를 나눠져있다.이걸 combineReducers로 root reducer에서 하나로 합쳐준다 

 

10. combineReducers안에 필요한 리듀서 넣어주면 됨

11. 방금 만든 리듀서(_reducers/index.js)를 src/index.js 에 import 하기

12. 받아온 리듀서를 createStoreWithMiddleware안에 넣기

13. chrome redux devtools 설치하기 -> 리덕스를 좀 더 편하게 사용할 수 있다. window.__머시기 && window.__머시기 넣기

 

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import ReduxThunk from "redux-thunk";
import Reducer from "./_reducers";

//redux를 더 잘 사용할 수 있도록 도와주는 미들웨어
const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  ReduxThunk
)(createStore);

ReactDOM.render(
        <Provider
          store={createStoreWithMiddleware(
            Reducer,
            window.__REDUX_DEVTOOLS_EXTENSION__ &&
              window.__REDUX_DEVTOOLS_EXTENSION__()
            //Redux DevTools 추가 (툴을 이용해서 Redux를 편하게 사용 가능)
          )}
        >
          <App />
        </Provider>
  document.getElementById("root")
);

reportWebVitals();

 

_reducer/index.js

import { combineReducers } from "redux";
//store에 reducer가 여러개 있을 수 있다.
//reducer은 어떻게 state가 변하는지 보여주고 마지막 값을 리턴하는 것
//import user from "./user_reducer";

const rootReducer = combineReducers({
  //combineReducers을 이용해서 root reducer에서 하나로 합쳐줌
  //user,
});

export default rootReducer;