5-6. FloatingButtonContainer 컴포넌트 만들기

이번 컴포넌트는 전달받을 상태는 없으므로 mapDispatchToProps 가 들어갈 자리에는 null 로 설정을 해주고, 두 종류의 액션들을 바인딩 해주겠습니다. 이 컴포넌트에서 이전에 App 컴포넌트에 있었던 generateRandomColor 를 사용하니 아까 따로 복사했던걸 여기에 넣으세요.

src/FloatingButtonContainer.js

import React, { Component } from 'react';
import FloatingButton from '../components/FloatingButton';
import { connect } from 'react-redux';
import * as modalActions from '../modules/modal';
import * as baseActions from '../modules/base';
import { bindActionCreators } from 'redux';
import oc from 'open-color';

// 랜덤 색상 생성
function generateRandomColor() {
    const colors = [
        'gray',
        'red',
        'pink',
        'grape',
        'violet',
        'indigo',
        'blue',
        'cyan',
        'teal',
        'green',
        'lime',
        'yellow',
        'orange'
    ];

    // 0 부터 12까지 랜덤 숫자
    const random = Math.floor(Math.random() * 13);

    return oc[colors[random]][6];
}

class FloatingButtonContainer extends Component {

    handleClick = () => {
        const { ModalActions, BaseActions } = this.props;

        // 뷰를 list 로 전환
        BaseActions.setView('list');

        // 주소록 생성 모달 띄우기 
        ModalActions.show({
            mode: 'create',
            contact: {
                name: '',
                phone: '',
                color: generateRandomColor()
            }
        });
    }

    render() {
        const { handleClick } = this;
        return (
            <FloatingButton onClick={handleClick}/>
        )
    }
}

// 리덕스에 컴포넌트 연결
export default connect(
    null,
    (dispatch) => ({
        ModalActions: bindActionCreators(modalActions, dispatch),
        BaseActions: bindActionCreators(baseActions, dispatch)
    })
)(FloatingButtonContainer);

App 에서 불러와서 사용하기

이제 FloatingButtonContainer를 App 컴포넌트에서 불러와서 렌더링하세요.

src/App.js

import React, { Component } from 'react';
import Header from './components/Header';
import Container from './components/Container';
import { connect } from 'react-redux'

import ViewSelectorContainer from './containers/ViewSelectorContainer';
import InputContainer from './containers/InputContainer';
import FavoriteListContainer from './containers/FavoriteListContainer';
import FloatingButtonContainer from './containers/FloatingButtonContainer';


class App extends Component {
    render() {
        // 레퍼런스 준비
        const { view } = this.props;

        return (
            <div>
                <Header/>
                <ViewSelectorContainer/>

                {/* view 값에 따라 다른 컨테이너를 보여준다 */}
                <Container visible={view==='favorite'}>
                    <FavoriteListContainer/>
                </Container>
                <Container visible={view==='list'}>
                    <InputContainer/>
                    {/* ContactListContainer */}
                </Container>

                {/* ContactModalContainer */}
                <FloatingButtonContainer/>
            </div>
        );
    }
}

export default connect(
    (state) => ({
        view: state.base.get('view')
    })
)(App);