![](/img/trans.png)
[英]Not getting updated Redux state to React component with mapStateToProps
[英]React redux not updating component state in mapStateToProps
我是新来应对redux的人,真的很努力地了解这里发生的事情。 如果有人能够对情况有所了解,我将不胜感激。
这是我的主屏幕:想法是,如果用户已经登录,那么我们向他们显示此屏幕,否则我们将其导航到登录屏幕。 如果他们已经登录,那么我们将从api中获取所有信息并调用setUser操作。
const mapStateToProps = (state) => { return { user: state.userReducer[state.userReducer.length - 1], } } class HomeScreen extends React.Component { constructor(props) { super(props); this.state = { user: this.props.user }; } componentDidMount() { //Check if they've logged in already and set for redux. SecureStore.getItemAsync("USER_INFO").then(response => { if (response !== undefined && JSON.parse(response).id.length > 0) { fetch(WEB_API + '/api/getUserInfo/' + JSON.parse(response).id) .then(response => response.json()) .then(responseJSON => { console.log("setting user"); this.props.dispatch(setUser(responseJSON)); }) } else { const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Login', params: this.props.navigation.state.params }), ] }); this.props.navigation.dispatch(resetAction); //this.props.navigation.navigate('Login'); } }); } render() { // } } }); export default connect(mapStateToProps)(HomeScreen);
可以在此处找到setUser动作和reducer,它们位于两个单独的文件中。
//UserReducer const userReducer = (state = [], action) => { switch (action.type) { case 'SET_USER': return [ ...state, { user: action.user } ] default: return state } } export default userReducer //userAction export const setUser = (user) => { return { type: 'SET_USER', user } }
最后,在另一个组件中,我正在等待加载用户首选项的列表。 因此,我需要等待来自redux的用户信息。 因此,在我的ComponentWillReceiveProps函数中,我具有以下内容:
const mapStateToProps = (state) => { console.log(state); console.log("After mapping"); return { user: state.userReducer[state.userReducer.length - 1], } } class LinksScreen extends React.Component { static navigationOptions = { title: 'Challenges', }; componentDidMount() { } componentWillReceiveProps() { console.log("receiving"); console.log(this.props); console.log(this.state); fetch(WEB_API + '/api/getAs/' + this.props.user.user.id) .then(response => response.json()) .then(responseJSON => { this.setState({ a: responseJSON }) }); fetch(WEB_API + '/api/getBs/' + this.props.user.user.id) .then(response => response.json()) .then(responseJSON => { console.log(responseJSON); this.setState({ b: responseJSON }) }); } constructor (props) { super(props); this.state = { user: this.props.user, challengesToVerify: [], challengesToDo: [], } } render() { } } export default connect(mapStateToProps)(LinksScreen);
我把console.logs放到了所有地方,但是我感觉好像在转圈,我只需要LinksScreen中的用户来获得A和B。 Redux杀死了我!
如果您这样编辑其他屏幕,则ı认为您的结构简单易读。
const mapStateToProps = state => {
const { user } = state.userReducer;
return user;
};
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
user: this.props.user
};
}
// Before component not render
componentWillMount(){
SecureStore.getItemAsync("USER_INFO").then(response => {
if (response !== undefined && JSON.parse(response).id.length > 0) {
this.props.getUserInfo(response);
}
else {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Login', params: this.props.navigation.state.params }),
]
});
this.props.navigation.dispatch(resetAction);
}
});
}
render() {
// .....
}
}
export default connect(mapStateToProps, { getUserInfo })(HomeScreen);
// Action
export const getUserInfo = (response) => dispatch => { // require redux-thunk for this dispatch
fetch(WEB_API + '/api/getUserInfo/' + JSON.parse(response).id)
.then(response => response.json())
.then(responseJSON => {
console.log("setting user");
dispatch({
type: 'GETUSERINFOSUCCESS',
payload: { user: responseJSON}
});
})
}
// Reducer : userReducer
const INITIAL_STATE = {
user: '',
}
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case "GETUSERINFOSUCCESS":
return { ...state, user: action.payload.user };
default:
return state;
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.