2016-02-06 21 views
5

私は最近、Reactで作業を始めました。私は常に問題に遭遇していますが、それを楽しんでいます。React + Redux connect(mapStateToProps)


私はボタンをクリックすることにより、GETリクエストを作成し、私はテーブル内のいくつかのデータを表示する場所をコンポーネント#1

コンポーネント#2は入力フィールドで、データを入力したいと思っていますが、下に表示するには単純なはずですか?


私はアクションを派遣し、私のGETリクエストを終了したら、状態は次のようになります。

{ 
    isFetching: false, 
    isPressed: true, 
    items: [{item: 1}, {item: 2}, {item: 3}] 
} 

その後、私は私の他のコンポーネントにナビゲートします。私はここに留まることを拒否する必要がありますか?他のページに移動すると、他のコンポーネントがどこにあるのか、状態はそのまま残ります。

私は私のコンポーネント#2上のアクションを派遣する場合の状態は次のようになります。私は本当にそれがどのように動作するか理解していないにもかかわらず、私はmapStateToProsを使用しています両方のコンポーネントで

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

それはどこで、なぜ私が信じている問題にぶつかっているのかということです。

function mapStateToProps(state) { 
    return state; 
} 

これは現在の状態を返します。そして、コンポーネント間を切り替えると、エラーメッセージが表示されます。

prev state Object { isFetching=false, isPressed=true, items=[10]} 
action Object { type="ADD_TODO", id=0, text="asd"} 
next state [Object { id=0, text="asd"}] 

をナビゲート他のページ

Error: `mapStateToProps` must return an object. Instead received [object Object]. 
に:私は私のコンポーネント#2上のアクションを派遣して、私のコンポーネント#1(GET-REQUEST)に移動しようとすると、私は次のようになります

私のシナリオではmapStateToPropsをどのように使うべきですか?

componentWillUnmountを使用する必要がありますか?私の店の購読を中止しますか?

私は100の質問をすることができるように感じますが、私はしません。私は常にドキュメントを読んでいるが、私はまだそれを理解しようとしている。

リンク、思考プロセスに関する助言、およびその他の有用なことは非常によく似ています。

EDIT:

これは私の減速である:リッキーは、以下の提案

として、私はオブジェクトに私の配列を作成する必要があります。

しかし、配列の代わりにオブジェクトを返すと、「スプレッド演算子」は機能しません。別のオプションがありますか(...)?

答えて

3

これは配列です:

[ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
] 

は対象ください:

{ 
    myData: [ 
    {id: 1, text: 'foo'}, 
    {id: 2, text: 'bar'} 
    ] 
} 

そして状態から "退会" はありません。 Reduxはすべての状態を1つのオブジェクトに格納します。各コンポーネントは、Redux connect()に提供された関数(mapStateToProps)内で必要な状態のプロパティを選択的に宣言します。

編集

応答で質問更新 - デフォルトの状態の配列に渡しています。オブジェクトを使用する:

const todo = (state = {}, action) => { 
    // initialize your default state properties 

    switch (action.type) { 
    case ADD_TODO: 
     return { 
      ...state 
      id: action.id, 
      text: action.text 
     } 
    default: 
     return state; 
    } 
} 

レデューサーのデフォルトの状態プロパティを初期化することができます。しかし、これらのものはすべてドキュメント/サンプルにあります。

ああ、あなたはより多くの助言のための私を求めているならば、それはupvoteする礼儀だ:)

+0

ねえリッキー、応答に感謝します。私はこれについてどうやって行くのですか?私の更新された投稿をチェックすることができたらうれしいです。 –

関連する問題