私はReact Nativeの初心者です。私は私のためReduxのアーキテクチャを使用していますが、私が原因Reduxののグローバルストア状態に問題に直面していますネイティブアプリを反応させます。React Native - Redux:アプリ内で同じ状態の複数のインスタンス
たとえば、と入力します。のアプリでは、次のようにナビゲートしています。
バックをナビゲートしながら、Reduxのアーキテクチャによると、これは最新の状態でナビゲーションスタックに現在のページのすべてのインスタンスの状態を変化させている
格納。ここ
は
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アーキテクチャによって明らかですが、私はそれを解決するためのトリックを取得していません。私の目標を達成するための助けや他の仕事は、大いに感謝します。
あなたの質問を明確にすることはできますか? –
@DamienLeroux、はい私は上記の私の質問を編集しました。もう一度やってみてください。 –
あなたは「reduxアーキテクチャーによると、ストアの最新の状態でナビゲーションスタックに存在するページのすべてのインスタンスの状態を変更しています。 reduxアーキテクチャーは、各アプリ状態をどこかに保存するコードなしではそうしません。かもしれそれはここ –