问Redux使用可重用的react组件

EN

const DropDown = styled.div`
    ...
    display: ${props => props.dropDownShown ? 'block' : 'none'};
    ...
`;

const Select = ({toggleDropDown, dropDownShown}) => (
    <div>
        <span class="input" onClick={() => toggleDropDown()}>
            <span>Item 1</span>
            <img src={selectArrowClear}/>
        </span>
        <DropDown dropDownShown={dropDownShown}>
            <Option>Item 1</Option>
            <Option>Item 2</Option>
            <Option>Item 3</Option>
        </DropDown>
    </div>
);

export default Select;

const toggleDropDown = () => ({
    type: 'TOGGLE_DROP_DOWN'
});


const mapStateToProps = state => ({
    dropDownShown: state.select.dropDownShown
});

const mapDispatchToProps = dispatch => ({
    toggleDropDown: () => {
        dispatch(toggleDropDown());
    }
});

const SelectContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Select);

export default SelectContainer;

const initialState = { dropDownShown: false };

const select = (state = initialState, action) => {
    switch (action.type) {
        case 'TOGGLE_DROP_DOWN': {
            return Object.assign({}, state, {
                dropDownShown: !state.dropDownShown
            });
        }
        default: return state;
    }
};

export default select;