React-redux状態に新しい変数を追加

Question

React-reduxアプリケーションで作業して、あるコンポーネントから別のコンポーネントに状態を介して値を渡すのは苦労しています。私は、Webサービスを呼び出すのではないので、レデューサーやディスパッチを使用したくないので、注文コンポーネントの別のコントロールを有効にするためにテキストボックスフォームから値を取得したいだけです。

まず、私はコントロールから値を取得できますが、mapstatetopropsが呼び出されて変数が設定され、状態に追加したい場合は未定義です。これは、おそらくなぜ私の他の問題を説明します。私の他のコンポーネントに小道具を使用する機能は

ので状態-componentWillReceivePropsで呼び出されることはありませんここでは、関連するコードスニペットです：

<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を使用しています。これにより、他のコンポーネントでこの変数にアクセスできますか？

Answer 1

setState（）はthis.stateをただちに変更するのではなく、保留状態遷移を作成します。このメソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。

Refer documentation for more about setState()

Answer 2

あなたが共通の親を共有する2つのコンポーネント間に何かを同期したい場合は[OK]をアクションの作成者の好みはさておき、あなたは親にその状態を持参する必要があります。

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アップデートを処理します。

言われていることは、私は本当にアクションクリエイター/レデューサーの使用に間違いがないと思います。