react-redux

## 설치 라이브러리

$ yarn add redux react-redux redux-actions

## 필수 셋팅

redux를 사용할 최상위 컴포넌트에 Provider를 이용해 store를 주입해야 한다.

import { Provider } from 'react-redux';

<Provider store={store}>
    <div>
        Redux App
    </div>
</Provider>

## Actions 셋팅

import { createAction } from 'redux-actions'

export const addText = createAction(TYPE_ADD);

위에 선언한 actions인 addText를 호출할 때 파라미터를 입력하게 되면 다음과 같은 데이터 구조로 reducer에 전달된다.

addText({text: 'abc', color: '#fff'});
/* 결과:
{
    type: 'TYPE_ADD',
    payload: {
        text: 'abc',
        color: '#fff'
    }
}
*/

## Reducer 셋팅

redux-actions의 handleActions를 이용하여 생성

import { handleActions } from 'redux-actions'

export const textAdd = handleActions({
    [TYPE_ADD]: (state, action) => {
        return state.update('textList', arr => arr.push(action.text));
    }
}, initState);

TYPE_ADD : action 명

initState : 초기 상태값

## Store 셋팅

여려개의 Reducer를 한개로 묶을 수 있는 combineReducers를 이용한다.

import { createStore, combineReducers } from 'redux'
import { textAdd, sample } from "./reducer";

const rootReducer = combineReducers({
    textAdd, sample
});

export const store = createStore(rootReducer);

## Component 연결

import { connect } from 'react-redux'

connect (props객체, dispatch 연결 객체)(component) 형태로 구성.

예제

Component = connect(
    (state) => {
        return {
            text: state.text
        }
    }, 
    (dispatch) => {
        return {
            addText: dispatch(addText('abc'))
        }
    }
)(Component);
export default Component;