[헤딩금지] Redux

What is Redux?

Store 에서 모든 데이터 관리합니다.

컴포넌트는 dispatch() 함수로 reducer에 액션을 전달합니다.

액션에는 reducer에서 처리해야 할 작업 이름, 데이터가 object 형태로 들어있습니다.

reducer는 액션을 받아 스토어 변경작업을 진행, 완료되면 connect() 함수로 연결된 컴포넌트에 변경된 스토어 데이터를 전파, sync합니다.

x	y
컴포넌트	손님
dispatch(), connect()	종업원
액션	주문서
reducer	요리사

yarn add redux react-redux

react-redux 를 설치하는 이유 : react 와 redux 연동을 위해서 필요함.

크롬 익스텐션: Rdedux DevTools 설치

yarn add redux-devtools-extension --dev

Redux로 빈 store 생성하기

createStore(reducer, /* initial state */ , /* enhancer */)

reducer, state(스토어 데이터의 초깃값), 미들웨어 함수를 인자로

Reducer <-> Action

{type: … , payload: …} 구조로 된 object

type: 어떤 작업인지 쉽게 이해할 수 있는 고유한 값(중복 x) 문자열

payload: 스토어에 사용될 값. 요건 다른 이름 해도 상관 없음, 생략도 가능

{
    type: 'SET_LOADING',
    payload: true
}
{
    type: 'SET_USER',
    payload: {
        name:'Park',
        age: 28
    }
}

payload를 생략하는 경우 : store의 데이터 초기화 할 때

{
    type: 'RESET_LOADING'
}

Reducer

function reducer(state, action){
    return state;
}

자세히 풀면

스토어의 이전 데이터(state), 액션(action)을 받아 새로운 스토어의 데이터를 반환해요

const reducer = (state, action) => state + action.payload;

리턴 되는 데이터의 자료형은 이전 데이터와 같아야 한다.

대부분 object 형이라 딱히 신경쓰진 않아도 된다.

Dispatch()

componentDidMount(){
    this.store.dispatch({
        type: 'SET_LOADING',
        payload: true
    });
}

{type: 'SET_LOADING', payload: true}

라는 액션이 dispatch()함수를 통해 reducer(state => state) 에 전달되요.

Reducer 분리

지금까지 1개의 리듀서가 스토어 전체를 관리했는데 이건 비효율적이다.

데이터의 종류에 맞게 분리하자.

|--- actions
    |--- loadingActions.js
    |--- userActions.js
|
|--- reducers
    |--- loadingReducers.js
    |--- userReducers.js
    |--- index.js
|
|--- AdvReducApp.jsx

loading reducer

user reducer

reducer binding

store 설정 파일