Question

我有一个应用程序，用户可以在其中向时间线添加元素（简化为列表）。但是，此操作将分派另外几个操作，并且其中一个实际上是生成的元素。实际上，可以回答以下问题的元素：您在这里还需要另一个元素吗？

我的问题是应该在哪里计算？例如，我应该在redux中更新状态还是计算此状态，然后再在mapStateToProps中进行渲染？而且，如果我应该在mapStateToProps中执行此操作，请记住这些建议之一被拒绝了。

const TimelineElement = ({type}) => {
    switch (type) {
        case 'Plane':
            return <Plane/>;
        case 'Train':
            return <Train/>;
        case 'Suggestion':
            return <Suggestion/>;
        default:
            return null;

    }

};

const PlaneTravel = () => {
    return <div>Plane</div>
};

const TrainTravel = () => {
    return <div>Train</div>
};

const Suggestion = () => {
    return <div>Accommodation suggestion</div>
};


//actions
const addElement = (element) => (dispatch) => {

    //add element stuff, then:

    dispatch(addSuggestions());
    dispatch(generateReturnElements());
};

const addSuggestions = () => (dispatch) => {
    // only if conditions are met,
    // put between elements some suggestions with question:
    // do you want add accommodation element here?
};

const generateReturnElements = () => (dispatch) => {
    // if someone checks the checkbox that mean round trip,
    // i want to put additional plane or train element to timeline

};


class App extends React.Component {


    render() {
        const elements = this.props.elements.map(element => {
            return <TimelineElement type={element.type}/>
        });

        return (
            <Timeline>
                {elements}
            </Timeline>
        );

    }
}

const mapStateToProps = (state) => ({
    elements: getElements(state)
});

const mapDispatchToProps = (dispatch) => bindActionsCreator({
    addElement,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

您可以通过使用库来计算派生的状态数据，例如重新选择https://github.com/reduxjs/reselect。尝试一下。它也可以对您的应用程序性能有所帮助。您可以停止浪费的重新渲染。

Answer 2

这实际上取决于您的需求。所选问题的一个组件可以加载答案列表。可以在本地状态下标记被拒绝的答案-进一步加载相同的问题将从所有可用的答案开始。如果您需要保留拒绝，请将其保存在全局存储中。

我不会在列表中添加“建议”，而是在此处放置“住宿”。建议看起来像视图部分，而不是数据/模型。

如果是类似向导的序列-您可以将可选功能分解为子组件。列出组件会在没有添加住宿且没有建议拒绝（拒绝是数据/记录）和其他条件的情况下有条件地显示项目之间的建议（组件）……这可能比仅将列表映射到组件中要困难，但为您提供了更大的灵活性。 / p>

选择要持久化的内容，将其全局存储，但可选内容保留在树状结构逻辑（组件）中。当然，每个可选操作都会导致插入全局列表。

我应该在react-redux应用中的哪里计算派生数据？

2 个答案: