Блог

я использую react, redux, react-router для своего проекта, и я столкнулся с проблемой.

всякий раз, когда я использую history.push() или Link to=» , целевой веб-сайт не отображается, но после его обновления все снова становится нормальным!

(добавление {forcefresh: true} в ./history, похоже, решает проблему, но есть ли другие способы сделать это!)

Как вы можете видеть, isSignedIn после перенаправления значение равно null:

Но после обновления он получит true значение.

Мой редуктор:

 import { SIGNED_IN, SIGNED_OUT } from '../actions/actionTypes';

const initialState = {
  isSignedIn: null,
  userInfo: null,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case SIGNED_IN:
      return { ...state, isSignedIn: true, userInfo: action.payload }; //important parts!
    case SIGNED_OUT:
      return { ...state, isSignedIn: false, userId: null };
    default:
      // return { ...state, isSignedIn: true, userInfo: action.payload };
      return initialState;
  }
};
  

В вашем редукторе, когда у вас есть необработанное действие, вы сбрасываете состояние (возвращаете начальное состояние):

   switch (action.type) {
    ...
    default:
      return initialState;
  }
  

вот почему isSignedIn после перенаправления становится нулевым. потому что, когда есть необработанное действие, это приведет к сбросу состояния. (я взглянул на ваш репозиторий, и там вызвано действие FETCH_COUNTS , которое не обрабатывается.)

Поэтому измените его на:

 export default (state = initialState, action) => {
  switch (action.type) {
    case SIGNED_IN:
      return { ...state, isSignedIn: true, userInfo: action.payload }; //important parts!
    case SIGNED_OUT:
      return { ...state, isSignedIn: false, userId: null };
    default:
      console.error('action is not handled!', action)
      return state; // <----- just return previous state when the actiontype is not recognized
  }
  return state
};

  

так что это не приведет к сбросу состояния, когда у вас есть необработанное действие.