已经有2天的时间了,我一直无法解决在我的react本机应用程序中实现redux的问题。我检查了许多主题,但无法解决问题。
问题在于mapStateToProps仅被调用一次,但在执行操作后不再被调用。我的reducer被调用了,但是状态没有更新。
我使用android studio和模拟器在android上测试我的工作。
这是我的代码:
App.js:
<Provider store={createStore(reducers)}>
<View>
<MainScreen />
</View>
</Provider>
HeaderReducer:
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case SET_HEADER:
return action.payload;
default:
return state;
}
};
reducers / index.js
import { combineReducers } from 'redux';
import HeaderReducer from './HeaderReducer';
export default combineReducers({
headerText: HeaderReducer,
});
actions / index.js
export const SET_HEADER = 'set_header';
export const setHeaderText = (title) => {
return {
type: SET_HEADER,
payload: title,
};
};
MainScreen.js
import * as actions from '../actions';
...
<Text> {this.props.headerText} </Text>
<Button
onPress={() => {
this.props.setHeaderText(`screen: ${SELECTED_PAGE.profile}`);
this.forceUpdate();
}}
>
...
const mapStateToProps = (state) => {
const { headerText } = state;
return { headerText };
};
export default connect(mapStateToProps, actions)(MainScreen);
我知道我不需要在onPress回调中强制执行Update,而只是在调用函数后检查状态。
因此,当应用程序启动时,将调用reducers,而我的mapStateToProps正在工作。但是,当我单击按钮时,将调用我的reducer,在开关中执行了良好的操作,但是不再调用mapStateToProps。当我再次单击console.log并在化简器中查看状态时,我可以看到状态未更新,但与INITIAL_STATE相同。
我不更改化简器中的状态,我连接了MainScreen.js中的所有内容,并将应用程序包装在具有商店的Provider中。
我按照有关Udemy的教程在我的应用程序中实现了缩减,甚至我在github上检查了tuto的代码,我也无法找出问题的出处(https://github.com/StephenGrider/ReactNativeReduxCasts/tree/master/tech_stack)
我想我想念一些确实很明显的东西,但是两天后我一直找不到出什么问题了:/
如果有人可以提供帮助,我将不胜感激:)
谢谢。
编辑:
我没有弄清楚问题,所以我只是从头开始,我做的完全一样(THE SAAME !!),它现在正在工作...感谢您的帮助:)
答案 0 :(得分:0)
问题出在您的HeaderReducer
中,reduce期望返回一个状态对象,但是您却返回了一个字符串。
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case SET_HEADER:
return action.payload;
default:
return state;
}
在SET_HEADER
期间,您真正想要的是覆盖一个字段而不是覆盖整个状态对象,因此改为下面的内容
const INITIAL_STATE = { customizeText: '' };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case SET_HEADER:
return { ...state, customizeText: action.payload }; // <<=== HERE
default:
return state;
}
}
然后在您的MainScreen.js
中,您必须更新mapStateToProps
函数
<Text> {this.props.someText} </Text>
...
const mapStateToProps = ({ headerText }) => {
return { someText: headerText.customizeText };
};
...
我已经更新了字段名称以避免混淆
答案 1 :(得分:0)
请首先以this.props.setHeaderText()
的名义进行实际操作,并根据需要传递标题,并确保INITIAL_STATE是对象或[]。
const mapStateToProps = (state) => {
return{
headerText: state.headerText
}
};
export default connect(mapStateToProps, actions)(MainScreen);