Question

我正在使用Redux和React从运行良好的Web服务加载数据。我想在UI中进行小的非基于Web服务的更改以响应操作。一个简化的例子：

class SmartComponent extends React.Component {
    handleClick = (e) => { 
         // how to best handle a simple state change here?
    }
    render() {
        const { displayMessage } = this.props
        return (
            <DumbComponent message={displayMessage}/>
            <button onclick={this.handleClick}>Change Message</button>)    
    }
}

const mapStateToProps = state => {
    // state variables linked in the reducer
}

export default connect(mapStateToProps)(SmartComponent)

let DumbComponent = ({ message }) => {
    return ({message})
}

如果我在SmartComponent中修改状态，例如，使用this.setState，则SmartComponent的道具将不会自动更新。我相信这是一个直接修改SmartComponent道具的React反模式。更新DumbComponent中的消息以创建动作创建者并将其链接到reducer中的最佳方法是？对于简单的消息更改，这似乎有点过分。

Answer 1

是的，您应该将它链接到reducer。

然而，这不是强制性的：

怎么做

另一种方法是将消息存储在SmartComponent的state中。请注意Redux不再是消息的唯一真实来源。

class SmartComponent extends React.Component {
    constructor(props) {
        super(props)

        // Initialize state based on props
        this.state = {
          message: props.message,
        }
    }

    componentWillReceiveProps(nextProps) {
        // Handle state update on props (ie. store) update
        this.setState({ message: ... })
    }

    handleClick = (e) => { 
         this.setState({ message: ... })
    }

    render() {
        const { displayMessage } = this.state
        return (
            <DumbComponent message={displayMessage}/>
            <button onclick={this.handleClick}>Change Message</button>)    
    }
}

const mapStateToProps = state => {
    // state variables linked in the reducer
}

export default connect(mapStateToProps)(SmartComponent)
let DumbComponent = ({ message }) => {
    return ({message})
}

你应该这样做吗？

如果您在此组件中显示的数据可以与应用程序的其余部分完全隔离，也就是说没有调度操作可以修改它，并且没有其他组件需要它，那么将这些数据保留在存储中是不必要的。

我主要使用此方法对视图组件执行乐观更新，而不更改存储，直到服务器保存新值。

使用React和Redux在UI中进行细微更改的最佳实践

1 个答案: