2016-10-13 15 views
5

私はReact Nativeの初心者です。私は私のためReduxのアーキテクチャを使用していますが、私が原因Reduxのグローバルストア状態に問題に直面していますネイティブアプリを反応させます。React Native - Redux:アプリ内で同じ状態の複数のインスタンス

たとえば、と入力します。のアプリでは、次のようにナビゲートしています。 enter image description here

バックをナビゲートしながら、Reduxのアーキテクチャによると、これは最新の状態でナビゲーションスタックに現在のページのすべてのインスタンスの状態を変化させている

enter image description here

格納。ここ

Page.js [成分]

class Page extends Component{ 

    componentWillMount(){ 

    } 

    render(){ 
     var {image,apiCall} = this.props; 

     return (
     <View> 
      <Image Source={{uri:image}} style={{// style for the image}}> 
     </View> 
    )} 

    componentDidMount(){ 
     this.props.apiCall(this.props.route.data.link); // this.props.route.data.link -> this is just a link for             // the apiCall 
    } 

    componentWillReceiveProps(){ 

    } 

    shouldComponentUpdate(nextProps, nextState){ 
     if(this.props.image==nextProps.image){ 
      return false; 
     } 
     return true; 
    } 

    componentWillUpdate(){ 

    } 

    componentDidUpdate(){ 

    } 

    componentWillUnmount(){ 

    } 
} 

    const mapStateToProps = (state) => { 
    return { 
    image: state.PageDataReducer.image 
    }; 
    }; 

    const mapDispatchToProps = (dispatch) => { 
    return { 
     apiCall: (link) => { 
     dispatch(fetchProduct(link)); // fetchProduct() -> is a function which fetches the product from the         // network and dispatches the action. 
     }, 
    }; 
    }; 

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

fetchProduct()の生成物をフェッチする関数]

export function fetchProduct(link) { 
    return function(dispatch){ 
    // fetches the product over network 
    dispatch(fetchedProduct(productLink)); 
    } 
} 
、上記の例のコードであります

を取得しました製品の[アクション]

export const fetchedProduct = (productLink) => { 
    return { 
    type: FETCHED_PRODUCT, 
    image: image 
    }; 
}; 

PageDataReducer [減速]

export default function PageDataReducer(state = initialState, action) { 

    switch (action.type) { 

    case FETCHED_PRODUCT: 
    var newState = { 
     ...state, 
     image: action.image 
    }; 
     return newState; 

    default: 
     return state; 
    } 
} 

私の観察:同じページは、そのページの店舗でナビゲーションと状態で発生するたびに、それを変更しますそのページのmapStateToProps()は、ページがナビゲーションスタックにある回数を呼び出します。そしてその回数だけ、そのページのライフサイクルメソッドをループし、最新の状態に応じて状態を変更します。私は引き出しの中にバナナをクリックこの例では
、それはは(店舗でマンゴーからバナナに状態を変更し、mapStateToProps)そのページが存在3倍であるため、(3回呼び出されますナビゲーションスタック内の、したがって最新の状態に従って、そのページの状態を変更するために、componentWillReceiveProps()からcomponentDidUpdate()へのすべてのライフサイクルメソッドが呼び出されます。戻っている間、私は私が訪問したすべての異なる製品を見ることができるように私は、ナビゲーションのページの異なる状態をしたい:私は欲しい

問題はreduxアーキテクチャによって明らかですが、私はそれを解決するためのトリックを取得していません。私の目標を達成するための助けや他の仕事は、大いに感謝します。

+0

あなたの質問を明確にすることはできますか? –

+0

@DamienLeroux、はい私は上記の私の質問を編集しました。もう一度やってみてください。 –

+0

あなたは「reduxアーキテクチャーによると、ストアの最新の状態でナビゲーションスタックに存在するページのすべてのインスタンスの状態を変更しています。 reduxアーキテクチャーは、各アプリ状態をどこかに保存するコードなしではそうしません。かもしれそれはここ –

答えて

-1

Reduxでのみ行うことはできません。

あなたはブラウザやアプリでナビゲーションの変更など、変更をhistorizeする必要があります。それにはHistoryJSが使用されます。このモジュールはreact-routerによって使用され、Webナビゲーションで優れたUXを提供します。

したがって、react-routerを使用して異なるページ(果実ごとに1つ)を宣言するか、またはHistoryJSを使用してプログラムでナビゲーション状態を保存してください。

私は反応ルータがネイティブアプリでどのように反応するかを知らないので、React Native Routerを見てください。それはhandle navigation with Redux on native appへの道を提示します。

+0

はい、実際に私は[**反応するネイティブ・ルータ・フラックス**](https://github.com/aksonov/react-native-router-flux)ライブラリとさえでてみましたあなたのproblemeですネイティブの**実験的な実験的な**コンポーネントに反応します。しかし、動作しませんでした。 問題はreduxアーキテクチャーによるものです。 通常の状態(reduxではなく)で行うと、もちろん正しく動作します。 しかし、いくつかのコンポーネントには状態を使用し、いくつかのコンポーネントにはreduxを使用するとよいでしょうか?はいの場合は、さまざまなコンポーネントの状態をアプリ全体で管理することができますか? –

+0

厳密に1つまたは複数の使用についての規則はありません。あなたはやりたいことに応じて、還元国と国家の両方を使うことができます。コンポーネントの状態をアプリ全体で管理できないようにする必要があります。 –

1

リンゴ、マンゴー、バナナに関するデータなどのドメインデータの格納場所を、現在選択されている項目など、UI状態の格納場所から切り離す必要があります。ドメインデータ部分では、一度ロードされたすべてのアイテムを保存します(あまりメモリを節約するために、最近使われたリストのようなガベージコレクションポリシーを後で追加することができます)。

ビューコンポーネントは、アプリケーション状態ツリーの両方の部分に接続します。UI部分には現在選択されているものが表示され、ドメイン部分には選択項目に関する詳細が表示されます。

mapStateToProps関数では、まず現在の選択範囲を抽出します。これは識別子でなければなりません。他の場所から抽出することもできます。コンポーネントprops(mapStateToPropsの2番目の引数)から取得します。次に、その抽出された識別子を使用して、すでにロードされているデータをドメインデータストアから取得します。選択されたデータは、ストア内にない場合(たとえば、ユーザーが最初にページを訪問、またはそれがすでにガベージコレクトされたとき)、あなたは小道具に空の値を入れて、これはcomponentDidMountまたはcomponentWillReceivePropsフックを意味しますこれはレンダリングされますが起こっている間、彼らは、データロード要求を(それはあなたがデータのロードを管理するために使用するものに応じて、佐賀やサンクへのデータ要求信号を送るアクションの発送として実装されてもよい)にするために持っていますいくつかの "読み込み中..."スタブを返します。リクエストが完了すると、別の発送は別mapStateToPropsを呼び出すにするために接続トリガーするドメインデータストアの更新を、更新してしまうと、これは、選択したデータがストアにすでにあることを発見することになるので、新しいデータ・ロード要求が行われることはありませんレンダリングには十分なデータが表示されます。

関連する問題