我正在尝试将redux与我的react native + Typescript应用程序集成。
[从一个特定的组件,我正在调度一个动作:
export const setCurrentOrder = (order: PostOrderRequest) => async (dispatch: Dispatch) => {
console.log('order in action: ', order);
dispatch({
type: MENU_POST_ORDER,
order: order
});
}
该console.log没有被执行,所以我在调用操作时是否出错?
这是我从组件中调用setCurrentOrder的方式:
handleNext() {
const {pizza} = this.state;
const {navigation} = this.props;
const currentOrder = {
pizza
}
console.log('current order: ', currentOrder);
setCurrentOrder(currentOrder);
navigation.navigate('Login');
}
handleNext()在按钮的onPress事件上被调用。
然后是我的减速器:
const initialState: MenuState = {
order: {pizza: []}
}
export default function (state = initialState, action: MenuAction) {
console.log('REDUCER: ', action);
switch (action.type) {
case MENU_POST_ORDER:
return {
...state,
order: action.order
};
default:
return state;
}
}
顺便说一下,reducer函数内部的console.log未被执行!我不知道为什么,但是好像在设置initialState,但是reducer函数从不执行。
我从组件执行了setCurrentOrder。然后,执行此操作后,该组件会将用户路由到其他组件。从其他组件,我正在使用react-redux来获取状态:
export default withNavigation(connect(
state => ({
state: state
}),
null
)(LoginScreen));
但是当我登录this.props.state
时,它显示了initialState。我尝试将this.props.state设置为组件反应状态,并使用componentDidUpdate来检查道具是否发生变化,以及是否更改了我的反应状态。但是它总是显示我的initialState,这样:
为什么要设置initialState但未执行reducer函数?
编辑:
这是我从组件中分派setCurrentOrder的方式(withNavigation包装器是因为我正在使用react-native-navigation):
export default withNavigation(connect(
null,
(dispatch: Dispatch) => ({
setCurrentOrder: (order: PostOrderRequest) => dispatch<any>(setCurrentOrder(order))
})
)(MenuScreen));
嗯,真可惜。内部handleNext()
setCurrentOrder(currentOrder)
应该是
this.props.setCurrentOrder(currentOrder)