Reactuxストアの状態の変更が機能していません

Question

以下のスーパーシンプルコードが期待通りに機能していません。

私はreactx store経由で反応し、注入/供給することを使用しています。どのような私の理解は、Reactコンポーネントに小道具を注入するのですか？

このコンポーネントを動作させるには、なぜ私はline1とline2の両方が必要ですか？あなたは間違ってそれをやっている

import React from 'react'; 
import './sytles.css'; 
import { fetchUsers } from "./actions/userAction" 
import { connect } from "react-redux" 

@connect((store) => { 
    return { 
     signup: store.users, 
    }; 
    }) 
class Signup extends React.Component { 

    handleClick(event) { 
     this.setState({email: event.target.value}) //line 1 
     this.props.signup.email = event.target.value; // line 2 
    } 
    render() { 
     return (
       <input 
        type="text" 
        name="email" 
        value={this.props.signup.email} 
        onChange= 
        { (event) => this.handleClick(event) }/> 
     ); 
    } 

} 
export default Signup; 

Answer 1

のようにそれを派遣 - それは読み取り専用ですReduxとは別にしかし、にReduxストアを変更するには、アクションをディスパッチします。 The Three Principles of ReduxのReduxのドキュメントごと：

状態は読み取り専用です

を状態を変更する唯一の方法はaction、何が起こったのか記述するオブジェクトを放出することです。

これにより、ビューもネットワークコールバックも状態に直接書き込まれなくなります。代わりに、彼らは国家を変える意図を表明する。すべての変更は集中管理され、厳密な順序で1つずつ実行されるため、微妙な競合条件はありません。アクションは単純なオブジェクトなので、デバッグやテストの目的でログに記録し、シリアル化し、保存し、後で再生することができます。

Answer 2

、小道具はまた、あなたが直接小道具から誘導された状態を維持するべきではありません、直接変異させてはなりません。あなたのデータsignupがストアに存在しているので、あなたはあなたが小道具を再割り当てすることはできません店舗

const handleSignup = (email) => { 
    return { 
     type: "SIGNUP_EMAIL", 
     email 
    } 
} 

でこの値を更新し、アクションの作成者を必要と

handleClick(event) { 
    dispatch(handleSignup(event.target.value)); 
}