У меня проблема с приложением React Native, которое использует Redux, и я пытаюсь выяснить причину.
Когда состояние Redux изменяется диспетчеризацией в компоненте A, компоненте Bне показывает самое актуальное значение состояния Redux.Например, скажем, я нажимаю кнопку в компоненте A, чтобы изменить значение Redux с 0 на 1, в компоненте B будет показано 0, но когда я нажму кнопку, чтобы добавить 1, чтобы сделать его 2, компонент B отобразит 1. Нижеэто пример моего кода.Когда я нажимаю на TouchableOpacity в компоненте A, он должен изменить this.props.screen с 1 (начальное состояние) на 0. В компоненте B у меня есть обычный console.log this.props.screen и консоль.войти в setTimeout с 50 миллисекунд.Внутри консоли console.log в setTimeout имеет правильное значение 0 при попадании, однако внешнее значение по-прежнему показывает 1. Аналогично, текст, отображаемый в компоненте B, также покажет 1.Если я нажму кнопку еще раз, она покажет 0.
Я включил соответствующее действие и редуктор из своего кода.Сначала я думал, что это может быть мутация, но казалось, что это может произойти только с объектами и массивами (я использую только число).Я был бы признателен за помощь в выяснении того, как текст, отображаемый в компоненте B, отражает самое последнее значение.Заранее спасибо!
Компонент A
import { connect } from "react-redux";
import { setScreen } from "../redux/Actions";
class Header extends Component {
componentWillReceiveProps(nextProps){
setTimeout(() => { this.logoHide() },10);
this.props.scrollLocation < 10 ? this.changeTransparency(0) : this.changeTransparency(.9);
}
setScreen(screen){
this.props.setScreen(screen);
}
render() {
var {height, width} = Dimensions.get('window');
return (
<View>
<TouchableOpacity onPress={() => this.setScreen(0)}>
<Text>Click Me</Text>
</TouchableOpacity>
</View>
);
}
}
const mapStateToProps = state => {
return {
height: state.height,
platform: state.platform,
screen: state.screen,
scrollLocation: state.scrollLocation
};
};
const mapDispatchToProps = dispatch => {
return {
setScreen: (value) => dispatch(setScreen(value))
};
};
export default connect(mapStateToProps,mapDispatchToProps)(Header);
Redux Action
import { SET_SCREEN } from './Constants';
export const setScreenDispatcher = (value) => ({ type: SET_SCREEN, screen: value});
export const setScreen = (value) => {
return (dispatch) => {
dispatch(setScreenDispatcher(value));
}
}
Redux Reducer
import { combineReducers } from 'redux';
import { SET_SCREEN } from "./Constants";
const initialState = []
const screen = (state = 1, action) => {
switch (action.type) {
case SET_SCREEN:
return action.screen;
default:
return state;
}
};
// COMBINE REDUCERS //
export default combineReducers({
screen
});
Компонент B
import { connect } from "react-redux";
class VisibleMenus extends Component {
componentWillUpdate(){
console.log(this.props.screen);
setTimeout(() => {console.log(this.props.screen)},50);
}
}
render() {
return (
<View>
<Text>{this.props.screen}</Text>
</View>
);
}
}
const mapStateToProps = state => {
return {
screen: state.screen
};
};
const mapDispatchToProps = dispatch => {
return {
};
};
export default connect(mapStateToProps,mapDispatchToProps)(VisibleMenus);
App.js
import React, {Component} from 'react';
import { Provider } from "react-redux";
import VisibleMenus from './VisibleMenus';
import { Store } from "./redux/Store";
const store = Store();
export default class App extends Component {
render() {
return (
<Provider store={store}>
<VisibleMenus />
</Provider>
);
}
}
Store.js
// REDUX STORE //
import { createStore, applyMiddleware } from "redux";
import rootReducer from "./Reducers";
import ReduxThunk from 'redux-thunk'
export const Store = (initialState) => {
return createStore(
rootReducer,
initialState,
applyMiddleware(ReduxThunk)
);
}