component 들을 redux 와 연결하는 app container

app.js

import React from 'react';
import { bindActionCreators } from 'redux';

import { connect } from 'react-redux';
import * as ActionCreators from '../actions';

import Add from '../components/add';
import Todos from '../components/todos';
import Header from '../components/header';

/**
 * Define React Presentational Component App
 */
const App = (props) => {
    const {toggleTodo, createTodo, setVisible, visible, todos} = props;
    return (
        <div>
            <Header setVisible={setVisible} visible={visible} />
            <Add onSubmit={createTodo} />
            <Todos todos={todos} onToggle={toggleTodo} />
        </div>
    );
};

const getVisibleTodos = (todos, visible) => {
    switch(visible) {
        case 'SHOW_COMPLETED':
            return todos.filter(t => t.completed);
        case 'SHOW_UNCOMPLETED':
            return todos.filter(t => !t.completed);
        case 'SHOW_ALL':
        default:
            return todos;
    }
};

const mapStateToProps = (state) => {
    return {
        todos: getVisibleTodos(state.todos, state.visible),
        visible: state.visible
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(ActionCreators, dispatch);
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);