Using React forwardRef with Redux connect

user_3706051 0
Viewed 9073

I have a React functional component that is using forwardRef like this:

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

export default wrapper;

Now I want to pass some state to this component using mapStateToProps with Redux's connect function like this:

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

I tried to combine them in the following way but it didn't work:

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

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

How do I combine these two to get the desired behaviour?

redux react-hooks reactjs
3 Answers

You can use options in connect function.

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

You can check the option on the connection method in redux: https://react-redux.js.org/api/connect
So the options allow use forwardRef
my code: connect(null,null,null,{forwardRef: true,})(LearnView)
it worked for me

user_87272250

If MyComponent is a functional component use hooks

This means that you don't need to write the connect wrapper at all. You can use hooks for redux is you're using a functional component.

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

and 

const dispatch = useDispatch()
user_25044070
Related