Использование React forwardRef с подключением Redux

Question

У меня есть функциональный компонент React, который использует forwardRef следующим образом:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default wrapper;

Теперь я хочу передать некоторое состояние этому компоненту, используя mapStateToProps с функцией connect Redux следующим образом:

export default connect(mapStateToProps, null)(MyComponent);

Я пытался объединить их следующим образом, но это не сработало:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default connect(mapStateToProps, null)(wrapper);

Как мне объединить эти два, чтобы получить желаемое поведение?

Answer 1

Вы можете использовать опции в функции подключения.

connect(mapStateToProps, null, null, { forwardRef: true })(wrapper)

Answer 2

Если MyComponent является функциональным компонентом, используйте ловушки

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

const result : any = useSelector(selector : Function, equalityFn? : Function)

и

const dispatch = useDispatch()