Redux: Как установить состояние по умолчанию errorCode в хранилище Redux после нажатия кнопки в теге <Link>

Question

Я пытаюсь обработать ошибку API с помощью Redux dispatch, создавая action, reducer & connect (mapStateToProps) в конце.

Поэтому, когда я ввожу неправильный URL, я получаю сообщение об ошибке на моем экране.Но мои ссылки кнопок, обернутые внутри тега, щелкаются, тогда мое следующее представление показывает то же самое сообщение об ошибке вместо рендеринга нового представления.

// Actions
export const API_ERROR = "API_ERROR"
export const resetErrorCode = () => ({
  type: RESET_ERROR_CODE
})

// Reducers
import { API_ERROR, RESET_ERROR_CODE } from "actions"

const api = (state = { errorCode: null }, action) => {
  switch (action.type) {
    case API_ERROR:
      return { ...state, errorCode: action.errorCode }

    case RESET_ERROR_CODE:
      return { ...state, errorCode: action.errorCode }

    default:
      return { errorCode: null }
  }
}
export default api

// Combiner reducers
import { combineReducers } from 'redux'
import API from "./api"

export default combineReducers({
  API
});

// test.jsx
import { connect } from 'react-redux'
import API from 'api.js'
import { resetErrorCode } from 'actions'
import { Link } from 'react-router-dom'
class Test extends Component {
    componentDidMount() {
       API.call()
     }
  render() {
    switch (this.props.errorCode) {
      case 400:
      case 404:
        return (
          <div>
            Error Page
          </div>
        )
      default:
        return (
          <div>
            <Link to={{pathname: '/nextPage'}}> <button> Next Page </button> </Link>
          </div>
        )
    }
  }

   componentWillUnmount() {
     this.props.errorCode()
  }
}

const mapStateToProps = (state) => {
  return {
    errorCode: state.apiStatus.errorCode,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    errorCode: () => dispatch(resetErrorCode())
  }
}

export default connect(mapStateToProps)(Test)

// api.js
class API () {
   responseErrorHandler(statusCode) {
    console.log('responseErrorHandler() called')
    store.dispatch(notifyAPIError(statusCode))
  }
  call = () => {
     axios.get(url)
        .then(...)
        .catch((error) => this.responseErrorHandler(error.response.status))
     }
}

Я наблюдал за моим состоянием избыточности, в то время как правильное состояние избыточности URL отображает {errorCode: null} и когда я введу неправильный URL-адрес, состояние изменится на {erroCode: 404}.Теперь Если нажать на мою кнопку, новый вид отображается, но код ошибки не меняется.Состояние Redux по-прежнему {erroCode: 404}.

Я пытался использовать componentWillUnmount, чтобы изменить состояние errorCode на ноль, но он не работает.

Есть ли решение этой проблемы, и я не уверен в своем подходе componentWillUnmount ().

Буду признателен за помощь.

Answer 1

Я не вижу особой ценности в том, чтобы иметь ошибку в хранилище Redux, если вы используете ее только внутри одного компонента, и очищать ее при размонтировании: простое состояние облегчит ситуацию в этом случае.

Если вы уверены, что хотите пойти по этому маршруту, подходящий момент для устранения предыдущей ошибки - это когда вы делаете новый запрос, который происходит при монтировании компонента.Это означает, что call () должен сбросить ошибку перед выполнением нового вызова (который теперь «загружается»), и установить его снова только после того, как он завершится ошибкой.

Очистка при размонтировании, вероятно, не понадобится, поскольку только страницы, которые выполняют вызов, должны проверить, произошла ли ошибка, и они сбросят ее при монтировании.

Наконец, некоторые ошибки кода, которые могут у вас возникнуть:

• Убедитесь, чтоваш редуктор прав: вы обычно не изменяете состояние «по умолчанию» коммутатора, так как любые другие действия других компонентов могут привести к потере состояния.
• Вы используете ту же опоруимя для mapStateToProps и mapDispatchToProps, что является проблемой.Это не дает сбоя, потому что вы не используете функцию mapDispatchToProps при подключении, так что вы можете удалить ее полностью.