React Redux不更新mapStateToProps中的组件状态

Question

I'm new to react redux and really struggling to understand what is going on here. If someone is able to shine a light on the situation I'd be very grateful.

Here is my home screen: The thinking is, if the user has already logged in, then we show them this screen otherwise we navigate them to the log in screen. If they have signed in then we get all their info from the api and call setUser action.

 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); 

The setUser action can be found here and the reducer, they are in two separate files.

 //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 } } 

Lastly, in another component, I'm waiting to load a list of the user's preferences. As such I need to wait for the user's information from redux. So in my ComponentWillReceiveProps function I have the following:

 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); 

I've put console.logs everywhere but I feel like I'm going around in circles, I just need the user in the LinksScreen to get the A's and B's. Redux is killing me!

Answer 1

if you edit other screen this like that, ı think your structure is simple and easily read.

 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;
      }
    };