redux - react - getderivedstatefromprops example

Actualizar el estado de Redux no dispara componentWillReceiveProps

Question

Estoy tratando de validar la información de inicio de sesión. Después de asegurarme de que el inicio de sesión es válido, quiero disparar una nueva ruta. Paso el state.loginReducer.login como props. Cuando manejo el evento de envío, se envía una acción que cambia el estado de inicio de sesión global.

¿No debería dispararse ComponentWillReceiveProps en este caso? ¿Desde que cambiaron los puntales? ¿Hay una mejor manera de implementar esta funcionalidad?

handleSubmit (evt) {
    const {
        dispatch,
        login
    } = this.props;

    dispatch(actions.doLogin(value.login));
}

ComponentWillReceiveProps (nextprops) {
    const {
        login
    } = this.nextProps;

    if (login != null) {
        history.pushState({}, ''/account'');
    }
}

function mapStateToProps (state) {
    return {
        login: state.loginReducer.login
    }
}

export default connect(mapStateToProps)(Login);

Answer 1

Haz lo siguiente:

function mapStateToProps (state) {
    return {
        login: Object.assign({}, state.loginReducer.login),
    }
}

Para asegurarse de que el objeto devuelto es realmente new .

Answer 2

Si el state.loginReducer.login cambia, el componentWillReceiveProps se activará. Si cree que su reductor está devolviendo un nuevo estado, y componentWillReceiveProps no se está activando, asegúrese de que el nuevo estado sea inmutable. Devolver la misma referencia de estado que se pasa al reductor no funcionará.

Desde https://github.com/reactjs/redux/blob/master/docs/Troubleshooting.md

Esto está mal:

function todos(state = [], action) {
  switch (action.type) {
  case ''ADD_TODO'':
    // Wrong! This mutates state
    state.push({
      text: action.text,
      completed: false
    });
  case ''COMPLETE_TODO'':
    // Wrong! This mutates state[action.index].
    state[action.index].completed = true;
  }

  return state;
}

Esto es correcto:

function todos(state = [], action) {
  switch (action.type) {
  case ''ADD_TODO'':
    // Return a new array
    return [...state, {
      text: action.text,
      completed: false
    }];
  case ''COMPLETE_TODO'':
    // Return a new array
    return [
      ...state.slice(0, action.index),
      // Copy the object before mutating
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

Answer 3

ComponentWillReceiveProps (nextprops)

debiera ser

componentWillReceiveProps (nextprops)

La C debe estar en minúsculas. En realidad, mapStateToProps desencadena componentWillReceiveProps . Estoy seguro de eso.