2017-01-16 44 views
1

私はコンポーネントを持っているので、状態が変わるたびに状態をチェックするメソッドを呼びたいと思います。React Native + Redux:状態の変更を購読するには?

export class Onboarding extends Component { 

    animateView() { 
    // i want to call this method when 
    // the state changes 
    // something like; 
    if (!this.props.onboarding.show) { 
     Animated.spring(...); 
    } 
    } 

    render() { 
    const { onboarding, finish } = this.props; 

    return (
     <Animated.View> 
     ... 
     </Animated.View> 
    ); 
    } 
} 

... 

export default connect(
    state => { 
    return { 
     onboarding: state.onboarding, 
    }; 
    }, 
    dispatch => { 
    return { 
    }; 
    } 
)(Onboarding); 

状態の変化に加入する方法はあります:これは私が何をしたいのかを証明するためにダミーの方法と私のコンポーネントは(もしonboarding.show === falseオフスクリーンビューをアニメーション化)とは?

== UPDATE ==

要求され、ここに私のslideOffScreenメソッドが何をするかだとして:

slideOffScreen() { 
    Animated.timing(this.state.offsetX, { 
     toValue: -Dimensions.get('window').width, 
     duration: 350, 
     easing: Easing.elastic(), 
    }).start(); 
    } 

答えて

2

反応-Reduxのconnect方法は、ストアの状態を認識しているコンテナコンポーネントとコンポーネントをラップ変更。状態が変わるたびに、connectはラップされたコンポーネントを再描画します(あなたのケースではOnboarding)。

redux docsによれば:

技術的に、コンテナコンポーネントは、単にReduxの状態ツリーの一部を読み取り、プレゼンテーションコンポーネントに 小道具を供給する store.subscribeを使用するコンポーネント()を反応させていますレンダリングします。手作業で コンテナコンポーネントを記述することもできますが、 コンテナコンポーネントをReact Reduxライブラリのconnect() 関数で生成することをお勧めします。 不要な再レンダリングを防ぐための多くの便利な最適化機能があります。

状態が変更されたときにコンポーネントが再レンダリングされない場合は、置き換えずに状態を変更していないかどうかを確認します。 Reduxは、古い状態と新しい状態を浅く比較することによって状態が変更されたかどうかをチェックします(参照のみを比較し、値は比較しません)。

たとえば、配列に項目を追加するには、array.push(item)を使用することはできません。新しい配列を作成せず、既存の配列を変更するだけなので使用できません。代わりにarray.concat(item)のようなものを使用する必要があります。あなたはhandling actios例の下Reduxのドキュメントで見ることができる

オブジェクトを更新するには、新しい状態を作成することを確認することができます。

我々は状態を変化させません。 Object.assign()でコピーを作成します。 Object.assign(state、{visibilityFilter:action.filter})も であり、最初の引数を変更します。空の オブジェクトを最初のパラメータとして指定する必要があります。また、オブジェクトの広がり 演算子提案で、{... state、... newState}を書くことができます。

+0

を通してそれを行う方法があります場合、私は、私は 'componentWillReceiveProps' – Edmund

+0

を使用して答えを見つけたと思う確かですストアのステータスが変わるたびにレンダリングされます。レンダリングでも同じことができます。 –

+0

'slideOffScreen'メソッドに関する詳細情報を提供できますか? –

0

この作品のように見える:

componentWillReceiveProps(props) { 
    if (!props.onboarding.show) { 
     this.slideOffScreen(); 
    } 
    } 

ないあなたがコンポーネントだ再来のAPI

関連する問題