Функция подключения Redux присваивает неправильное значение состояния в компоненте без статистики

Я пытаюсь передать некоторую поддержку компоненту без состояния для моих потребностей условного рендеринга. При присвоении значения состояния редукции моей переменной в connect(), например var: state.reducer.var, я не получаю объект «state.reducer.var». Вместо этого я получаю весь объект состояния.

Когда console.log(state.reducer.var) в connect() в качестве обратного вызова, я получаю ожидаемый результат - значение var. Хотя, когда console.log(var) в качестве обратного вызова передает ему мою только что назначенную переменную, я получаю объект, который я получил бы, когда console.log(state).

В моем дочернем компоненте я получаю undefined, используя свою переменную как props.var

const _ProtectedRoute = ({ component: Component, ...rest }, props) => {
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...rest} />
      }
    </Fragment>
  );
}

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }, (isAuthed) => {console.log('state value: ', isAuthed)})
)(_ProtectedRoute);

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


reactjs javascript redux react-props
person moshyfawn    schedule 02.05.2019    source источник
comment
второй аргумент connect не является обратным вызовом; это объект (или функция, возвращающая объект), содержащий карту имен реквизита для функций создания действий Redux.   -  person Dan O    schedule 02.05.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы все делаете правильно, и все должно работать так, как ожидалось, но я заметил синтаксическую проблему в вашем коде, должны быть закрывающие скобки после фигурных скобок в первом аргументе для подключения, а второй аргумент должен возвращать объект, как показано ниже.

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }), (dispatch) => ({
      printAuth:(isAuthed) => {console.log('state value: ', isAuthed)}
  })
)(_ProtectedRoute);
person Saurabh Chouhan    schedule 02.05.2019

arrow_upward
0
arrow_downward

Недостаток моих знаний об аргументах функций был проблемой. Моя функция connect() действительно работала (должна была работать). Возникла проблема с приемом реквизита в моем дочернем компоненте. ({ component: Component, ...rest }) это уже "Реквизит". ({ component: Component, ...rest }, props) означает, что я назначаю другой аргумент "props", который не определен. Таким образом, вместо того, чтобы преобразовывать component в Component для использования в качестве <Component /> в моей функции позже, это нужно было сделать позже, до return(). Как обычно, это приводит к передаче реквизита в качестве аргумента. Итак, мой дочерний компонент теперь может получать состояние редукции в качестве реквизита от mapStateToProps().

P.S. Как отмечают некоторые люди, вход в консоль в connect() действительно неверен, поскольку это не обратный вызов.

const _ProtectedRoute = props => {
  const Component = props.component;
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...props} />
      }
    </Fragment>
  );
}

const mapStateToProps = (state) => ({
  isAuthed: state.user.isAuthed
});

const ProtectedRoute = connect(mapStateToProps, null)(_ProtectedRoute);
person moshyfawn    schedule 02.05.2019