Я новичок в React Native. Я использую redux архитектуры для моего реагировать родной app однако я столкнулся с проблемой из-за global store state of redux.React Native - Redux: несколько экземпляров того же состояния в приложении
Предположим, например, Вперед в приложении Я прохожу, как показано ниже.
Некоторое время назад навигации,
Согласно Redux архитектуры, Он изменяет состояние каждого экземпляра страницы, присутствующую в стеке навигации с последним государством в магазин.
Вот код для приведенного выше примера,
Page.js [Component]
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 раза в стеке навигации) и, следовательно, все методы жизненного цикла реакции от компонентаWillReceiveProps() на componentDidUpdate() вызывается 3 раза только для изменения состояния этой страницы в соответствии с последним состоянием.
Что я хочу?: Я хочу разное состояние страницы в навигации, так что, возвращаясь, я вижу все разные продукты, которые я посетил.
Проблема очевидна в соответствии с архитектурой redux, но я не понимаю, как ее решить. Любая помощь или любая другая работа вокруг для достижения моей цели была бы весьма признательна.
Вы можете уточнить свой вопрос? –
@DamienLeroux, да, я отредактировал мой вопрос выше. можете ли вы, пожалуйста, пройти через это снова. –
Вы сказали: «Согласно архитектуре redux, он изменяет состояние каждого экземпляра страницы, присутствующей в стеке навигации, с самым последним состоянием в магазине». Архитектура redux не делает этого без кода, чтобы сохранить каждое состояние приложения где-то. Может быть, это ваша проблема здесь –