Как использовать значения, полученные с помощью Redux в componentDidMount

Question

Я пытался разработать приложение в React + Redux. Моя проблема в том, что значения, извлеченные с помощью Redux, нельзя использовать в componentDidMount(). Значения Redux используются только в render(), но есть ли у вас идеи использовать значения перед рендерингом?

Мой код:

class User extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.fetchUser(id);

    const { user } = this.props;
    console.log("user", user);
    // This is my issue, I can't get user here!
  }

  render() {
    const { user } = this.props;
    console.log("user", user);
    return (
      <p>{user.name}</p>
    )
  }

function mapStateToProps({ users }) {
  return { user: users };
}

export default connect(mapStateToProps, { fetchUser })(User);

код действия:

export function fetchUser() {
  return dispatch => {
    firebase.auth().onAuthStateChanged(user => {
      roomsRef
        .doc(user.uid)
        .get()
        .then(doc => {
          dispatch({ type: FETCH_USER, payload: doc.data() });
        });
    });
  };
}

редуктор

import { FETCH_USER } from "../actions";

const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USER:
      return action.payload;

    default:
      return state;
  }
};

магазин

const rootReducer = combineReducers({
  users: UsersReducer,
});

const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

Answer 1

Сделайте это, и реакция будет искать пользователя

  state={
    user:null
  }

    componentDidMount = () => {
        this.props.fetchUser(id);
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.user !== prevState.user) {
            return { user: nextProps.user };
        }
        else return null;
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.user !== this.props.user) {
            //Perform some operation here
            this.setState({ user: this.props.user });
            // do what you wanna do with user here
             console.log(this.state.user) //would return user obj here
        }
    }

с Redux как

const mapStateToProps = state => {
    return {
        user: state.UsersReducer.user
    }

}

const mapDispatchToProps = dispatch => {
    return {
        fetchUser: (id) => dispatch(actions.yourreduxfunc(id)),
    }
}

Answer 2

Ваша реализация fetchUser в ComponentDidMount является синхронной. Сделайте это асинхронным.

const { id } = this.props.match.params;

this.props.fetchUser(id).then(()=>{
    const { user } = this.props;
    console.log("user", user);
})