소개

마지막으로 react-redux에 대해 나름대로 기사을 썼습니다. 그러나 실제로 컴포넌트와 store를 연결해 state를 변경하는 것은 어떤 흐름이 되고 있는지 더욱 심해지기 위해 이번에는 코드베이스로 써 보려고 했습니다.

컴포넌트 생성

그럼 빨리 가자.
이번에는 버튼을 클릭하면 다이얼로그가 발생하는 처리를 씁니다. 해당 대화 상자가 발생하는 부분을 store에 기재합니다.
우선은 store를 연결하는 컴포넌트 준비합니다.
이번에는 material-ui 버튼을 놓는 간단한 구성 요소를 만듭니다.

myComponent.tsx

import React from 'react';
import * as patientList from '../../store/MyComponent';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import Button from '@material-ui/core/Button';
import AddCircleIcon from '@material-ui/icons/AddCircle';

return (
    <React.Fragment>
        <Fab
            color='primary'
            style={{
                position: 'fixed',
                zIndex: 3,
                right: '2em',
                bottom: '2em',
            }}
            onClick={onListClick}
        >
            <AddIcon />
        </Fab>
    </React.Fragment>
);
export default MyComponent;

이제 브라우저의 오른쪽 하단에 다음과 같은 버튼이 표시됩니다.

스토어 만들기

그런 다음 위에서 만든 구성 요소에 연결하는 저장소를 만듭니다.
이번에 구현한 코드를 표시합니다.

myComponent.ts

import * as React from 'react';
import { Action, Reducer } from 'redux';
import { AppThunkAction } from '.';
import { push, RouterAction } from 'react-router-redux'

export interface MyComponentState {
    master: Master;
    test: string;
    userData: any;
};

interface ClearAll {
    type: 'MYCOMPONENT/CLEAR_ALL';
}

interface ListClick {
    type: 'MYCOMPONENT/LIST_CLICK';
}

export type KnownAction =
    ListClick
    | ClearAll;

const unloadedState: MyComponentState = {
    master: {
        word: ''
    },
    test: '',
    userData: {}
};

export interface IActionCreators {
    onClick: () => AppThunkAction<KnownAction>;
};

export type ActionCreators = IActionCreators;

function setInit() {
    return 'test';
}

export const actionCreators: ActionCreators = {
    onClick: () => (dispatch, getState) => {
        alert('onClick run');
    },
}

export const reducer = (state: MyComponentState, incomingAction: Action) => {
    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'MYCOMPONENT/LIST_CLICK': {
            return {
                ...state,
            }
        }
        case 'MYCOMPONENT/CLEAR_ALL': {
            return {
                ...unloadedState,
            }
        }
        default:
            const exhaustiveCheck: never = action;
    }
    return state || unloadedState;
};

이번에는 버튼을 클릭하면 'onClick run'이라는 경고를 표시하므로 먼저 처음 onClick이라는 Action의 유형을 정의했습니다.

export interface IActionCreators {
    onClick: () => AppThunkAction<KnownAction>;
};

그런 다음 상태를 변경하는 Action 내용을 구현합니다.
onClick이라는 Action Creator에 처리 내용을 구현합니다.
이번에 추가하는 처리는 버튼을 클릭하면 'onClick run'이라는 경고만 표시하므로 아래와 같은 처리를 추가합니다.

onClick: () => (dispatch, getState) => {
        alert('onClick run');
    },

이대로는 Action이 발행되어도 state를 변경할 수 없기 때문에 마지막으로 Reducer를 다음과 같이 정의합니다.

export const reducer = (state: MyComponentState, incomingAction: Action) => {
    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'MYCOMPONENT/LIST_CLICK': {
            return {
                ...state,
            }
        }
        case 'MYCOMPONENT/CLEAR_ALL': {
            return {
                ...unloadedState,
            }
        }
        default:
            const exhaustiveCheck: never = action;
    }
    return state || unloadedState;
};

이것으로 store 구현이 완성되었습니다.
그런 다음 이 저장소를 구성요소에 연결해야 합니다.

myComponent.tsx

export default MyComponent;

이 부분을 다음과 같이 수정하여 store에 연결할 수 있도록 합니다.
connect를 사용하여 store와 연결합니다.

myComponent.tsx

export default connect(
  (state: ApplicationState) => (state.patientList),
  (dispatch) => bindActionCreators({ ...myComponent.actionCreators }, dispatch)
)(MyComponent);

그러면 동작 확인을 합니다.

작지만 화면 상단에 'onClick run'이라는 경고가 표시되어 컴포넌트와 store가 연결할 수 있었음을 확인할 수 있었습니다.

요약

컴포넌트와 스토어의 연결 흐름을 최소 단위의 코드베이스로 설명했습니다.
이번은, 단지 경보를 표시시키는 것만의 간단한 처리가 되었습니다.화면 천이나 그 외의 처리에서도 이 방법으로 구현할 수 있습니다.
이 방법을 취하는 것으로 state의 관리가 편해지기 때문에 앞으로의 개발에서도 사용해 나가려고 생각합니다!