使用 React 和 Redux 对 UI 进行细微更改的最佳实践答案

【问题标题】：Best practice for making small changes in UI with React and Redux使用 React 和 Redux 对 UI 进行细微更改的最佳实践
【发布时间】：2016-12-20 07:30:21
【问题描述】：

我正在使用 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的props将不会自动更新。我相信直接修改SmartComponent的props是一种React反模式。更新DumbComponent 中的消息以创建动作并将其链接到reducer 的最佳方法是什么？对于简单的消息更改来说，这似乎有点矫枉过正。

【问题讨论】：

标签： reactjs redux

【解决方案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})
}

你应该这样做吗？

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

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

【讨论】：