hello world還元剤/ reactx

Question

反応に関しては他にもいくつかのhello worldアプリの質問がありますが、私のものは還元剤特有のものです。私は私の特定の行動のために減速機に入れなければならないものを正確にはわかりません。

注*：私は多分、私がメッセージを追加する必要があると思った：私の最初の状態に「」キーと値のペアをして、減速中の文は、その後にそれを派遣する場合、私に

var newState = Object.assign({}, state, { 
     message:"hello world" 
    }); 

を宣言それはいつもhello worldを印刷する必要があるので不必要なように見えるので、ハードコーディングがより効率的に見えます。うまくいけば、この質問にあまりにも多くの混乱はありません。ここで

は私のコンポーネントである：

var HelloWorld = React.createClass({ 
    helloWorld: function() { 
    this.props.dispatch(actions.printHello()); 
    }, 
    render: function() { 
    return (
     <div className="HelloWorld"> 
     <h1>Hello World!</h1> 
     </div> 
    ); 
    } 
}); 

var Container = connect()(HelloWorld); 

module.exports = Container; 

は、自分の行動：

var $ = require("jquery") 

var PRINT_HELLO = 'PRINT_HELLO'; 
var printHello = function() { 
    return { 
     type: GUESS_NUM 
    }; 
}; 

exports.PRINT_HELLO = PRINT_HELLO; 
exports.printHello = printHello; 

と減速：

var actions = require('./actions'); 

var initialRepositoryState = { 
    type: null 
}; 

var capstoneApp = function (state,action) { 
    state = state || initialRepositoryState; 


    if (action.type === actions.PRINT_HELLO) { 
    var newState = Object.assign({}, state, { 
     message:"hello world" 
    }); 
    return newState; 
    } 
}; 

私はあなたが私のindex.jsが必要になると思いますが、私はありません必要に応じて提供します。 事前にお問い合わせいただきありがとうございます！

Answer 1

還元剤はあなたの状態を保持します。だから、それについての考え方は、 "私のプログラムのうち、変わる部分は何ですか？"そして、そこから、次の質問は「私のプログラムを握るのに最低限必要な州は何ですか？」

あなたの例を見ると、UIで「hello world」と表示されることがあるアプリケーションを構築しようとしているという印象を受けます。すべての部分を説明するのに役立ついくつかのインタラクションを作ってみましょう。

最初は、空のラベルとボタンを持つプログラムを作成するのに役立ちます。ボタンをクリックすると、「hello world」と表示されます。

さて、最初の質問に答えるにはどうすればよいですか？アプリは "こんにちは世界"を表示することも、何も表示することもできません。私たちはそれをいくつかの異なる方法で保存することができました。上記のように文字列がハードコードされている場合は、本当にメッセージを表示するかどうかはboolです。

もう1つの真実の価値は、ほとんど最小限の状態の定義です。

var initialState = { 
    showMessage: false, 
}; 

var reducer = function(state, action) { 
    var newState = Object.assign({}, state); 
    if (action.type === 'BUTTON_PRESS') { 
     newState.showMessage = !newState.showMessage; 
    } 
    return newState; 
} 

わかりましたので、今はそれがBUTTON_PRESSアクションを取得したときに、それがその状態のビットを反転させ、減速を作成しました：それでは、減速機を作ってみよう。

ここで、そのレデューサーを還元する方法について説明しましょう。今のところ、減速機は普通のjavascript関数です。最初の状態でその店舗をレフィックスに渡すだけです。 [createStore] [1]

P.S. commonJSインポート構文

var redux = require('redux'); 
var store = redux.createStore(reducer, initialState); 

次の部分がredux-reactを見ている中小型タイプミスがあるかもしれないので、私は通常、ES2015のコードを記述します。 Redux-reactは、反応する接着剤です両方の方法でが反応します。それはreduxストアからのデータを反応小道具に接続し、反作用アクションに反応コールバック（クリックなど）を接続します。

ので、概念的に、それはこのようになります。ボタンがある反応コンポーネントがあります。ボタンをクリックすると、「BUTTON_PRESS」アクションが生成されます。この後、反応コンポーネントはもはやBUTTON_PRESSに何が起こるか気にしません。その仕事は終わった。 BUTTON_PRESSは無限のものの1つを行うことができます。ここで、redux-reactがその仕事をして、そのアクションを減速機に渡すと仮定します。減速機は新しいロジックを計算し、新しい状態を返します。この新しい状態には、showMessageという値があります。次に、redux-reactは接続の残りの半分を行い、showMessageをコンポーネントのプロップにします。同じ反応コンポーネントがあなたの行動によって変化した状態に応答しなければならないという明白な理由はありません。それらは異なるコンポーネントである可能性があります。ここでは、箇条書きにそれを置くために

はcodeflowがどのように動作するかを示します。

1. 我々は=偽
2. リアクトコンポーネントを作成するとき、我々はshowMessageをバインドするconnectを使用showMessageで初期ストアを作成します小道具にし、「BUTTON_PRESS」アクションを生成するコンポーネントのボタンのonClickを処理します。 showMessageがfalseであるので
3. は、もともとボタンのみが存在します。
4. ユーザーがボタンを押します。
5. redux-reactを使用してBUTTON_PRESSイベントをディスパッチします。
6. reduxがアクションを取得すると、それは現在の状態とアクションで減速機を呼び出します。減速は、減速が真
にshowMessageを設定
8. このアクションに応答して、新しい状態を生成する責任があり、反応reduxが変更を格納するために待機し、それが変化した場合には、反応成分
9. プロップのための小道具を変更しますrender calls（）
   10. レンダリングメソッドの内部でthis.props.showMessageがtrueであることがわかります。

そしてここで、このような反応コンポーネントを実装することができる方法です。 ES205とES2015のリアクションコンポーネント間には十分な違いがあり、私はあなたにES2015バージョンを与えようとしており、再び謝罪します。

class HelloWorld extends Component { 
    render() { 
     const message = this.props.showMessage ? "Hello world!" : ""; 
     return (
     <div id="label">{message}</div> 
     <div id="button" onClick={this.props.handleOnClick}>Toggle the message </div> 
     ); 
    } 
} 

HelloWorld.propTypes = { 
    showMessage: PropTypes.bool.isRequired, 
    handleOnClick: PropTypes.func.isRequired, 
}; 

const mapStateToProps = state => ({ 
    showMessage: state.showMessage, 

}); 

const mapDispatchToProps = dispatch => ({ 
    handleOnClick: dispatch({ type: 'BUTTON_PRESS', payload: '' }) 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(HelloWorld); 

ドキュメントを読み続けることができますが、すべての部品が何であるかを説明するのに役立ちます。何かが明確でない場合は、私に知らせてください。 [1]：私と一緒に夜の時間のhttp://redux.js.org/docs/api/createStore.html