React-redux 向 state 添加一个新变量答案

【问题标题】：React-redux add a new variable to stateReact-redux 向 state 添加一个新变量
【发布时间】：2017-03-16 18:22:24
【问题描述】：

我正在努力开发 React-redux 应用程序以通过状态将值从一个组件传递到另一个组件。我不希望使用 reducer 和/或 dispatch 因为我没有调用 web 服务，我只想从文本框表单中获取一个值来启用 order 组件上的另一个控件。

首先，我可以从控件中获取值，但是当调用 mapstatetoprops 时，我设置并希望添加到状态的变量是未定义的。这也可能解释了为什么我的其他问题。在我的另一个组件上，由于 state-componentWillReceiveProps，永远不会调用使用 props 的函数

这里是相关代码sn-p：

<ListItemContent>
    <Control component={Textfield} model="somemodel" label="MyLabel" onBlur={this.onChangeOfValue}/>
</ListItemContent> 

onChangeOfValue = (event) => { 
    this.setState({ 
        newValueToPassAlong: event.target.value
    }); //newValueToPassAlong is set in constructor 
};

let mapStateToProps = (state) => { 
    return {
        newValueToGive: state.newValueToPassAlong
    } // This is undefined
}; 

export default connect(mapStateToProps)(form)

所以，我的问题是如何使用 React-redux 将新变量添加到状态而不需要减速器等，并且我可以在我的其他组件中访问这个变量吗？

【问题讨论】：

在非联网操作中使用操作创建器/缩减器有什么问题？也就是说，请阅读本文以获取潜在的解决方案。 facebook.github.io/react/docs/lifting-state-up.html
当我只需要知道是否在文本框中输入了一个值，再加上我继承的代码正在使用 saga 似乎有一个错误时，感觉有很多事情要做
如果你使用 redux，actions 和 reducer 就是你的交易工具。

标签： reactjs react-redux

【解决方案1】：

除了操作创建者的偏好之外，如果您想在共享一个共同父级的两个组件之间同步某些内容，您必须将该状态带入父级。

class ParentComponent {
    onItemChanged = (newData) => {
        this.setState({ thing: newData });
    }

    render() {
        return (
            <div>
                <ChildA onItemChanged={ this.onItemChanged } />
                <ChildB thing={ this.state.thing } />
            </div>
        );
    }
}

当您更改ChildA 中的值时，请将this.props.onItemChanged 与新值一起使用。在ChildB 中，该值将在this.props.thing 中同步。 React 将处理所有 Component/prop 更新。

话虽如此，我真的认为使用动作创建器/减速器没有任何问题。

【讨论】：

【解决方案2】：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

Refer documentation for more about setState()

【讨论】：

即使他使用了回调方法，他也试图从使用全局状态存储的mapStateToProps 中访问组件本地状态。