Question

我尝试在redux中创建一个可重用的组件这背后的想法是我正在创建一个智能组合框并将其放置在其他组件或智能组件中多次。

让我们假设此组合框中唯一的工作是显示国家/地区，允许添加新国家/地区并告诉父母选择了哪个国家/地区。

父母不必将可用国家传递给组合框只有onValueChanged事件，以便父母知道选择了哪个国家。

这导致以下结构（这些项目并不是真正的国家，以保持简单，但你应该了解它背后的想法）：

//Constants (appConstants.ts)
export const SmartCombobox = {
    ADD_ITEM: 'SMART_COMBOBOX/ADD_ITEM'
}

//Action creator (smartComboboxAction.ts)
import { SmartCombobox } from '../constants/appConstants';

export function AddItem() {
    return {
        type: SmartCombobox.ADD_ITEM
    };
}

//Reducer (smartCombobox.ts)
import { SmartCombobox } from '../constants/appConstants';

const initialState = ['Item 1']

export default function items(state = initialState, action) {
    switch (action.type) {
        case SmartCombobox.ADD_ITEM:
            let items = ['Item' + Math.random().toString()]
            return state.concat(items);
        default:
            return state;
    }
}

//Container (smartCombobox.ts)
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { default as SmartCombobox } from '../components/combobox';
import * as ComboboxActions from '../actions/smartComboboxAction';

function mapStateToProps(state) {
    return {
        items: state.items        
    };
}

function mapDispatchToProps(dispatch) {
    return {
        comboboxActions: bindActionCreators(<any>ComboboxActions, dispatch)
    }
}

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

然后我可以在我的组件或智能组件中使用它。当我添加一个新项目时，包含我的smartCombobox的每个组件都将被同步并且具有确切的项目数量。

//Component (combobox.tsx)
import * as React from 'react';

interface SmartComboboxProps {
    items?: Array<any>,
    comboboxActions?: any,
    onValueChanged: Function
}

export default class SmartCombobox extends React.Component<SmartComboboxProps, any> {
    onValueChanged(event:any) {
        let selectedValue = event.target.value;
        const { onValueChanged } = this.props;

        onValueChanged(selectedValue);
    }

    componentDidMount() {
        // Call value changed for first selected item        
        this.props.onValueChanged(this.props.items[0]);
    }

    render() {
        const { comboboxActions } = this.props;

        let options = this.props.items.map(function (o) {
            return <option key={o} value={o}>{o}</option>
        });

        return (
            <div>
                <select style={{ width: "200px" }} name="SmartCombobox" onChange={ this.onValueChanged.bind(this) } >
                    { options }
                </select>
                <button onClick={ comboboxActions.AddItem }>Add item</button>
            </div>
        );
    }
}

Final result (Image)

这是可重复使用组件的正确方法吗？或者我可能会忘记任何陷阱？

还有一个想法是组合框应该直接连接到api，因为应用程序不应该知道这里发生了什么。
但这会打破通量的想法，因为我需要在这个组件内部的状态等。
我反对这个想法......

Answer 1

这是可重用组件的正确方法吗？或者可能有任何陷阱我可能会忘记

这种方法很好。

还有一个想法是组合框应该直接连接到api，因为应用程序不应该知道这里发生了什么。

你就在这里。真理的来源（或者更确切地说是真理设定者）只需要是一个，因此不能成为组成部分。

redux中的嵌套智能组件

1 个答案: