React Redux pass props to other component enhancer

Question

I have 2 components, ReviewList and Review. ReviewList has a list of components Review and for each component Review has a property review.

I want to put some logic work on the component so I want to create an enhancer (Review.enhancer.js) to do that type of work (I want the component Review to be a dummy component).

I'm using react-redux and on my Review.enhancer I am using connect method to get the prop ({review}) but I got nothing. I'm noob in react and redux.

Answer 1

First of all, you don't necessarily need the connect function if you already provide the data by passing it as a prop to the enhancer. In this case you could also use the recompose library to apply logic to the data. However, in most cases you still need to dispatch actions, so the connect function from react-redux would still be required.

When props are passed to a component that is wrapped by a connect function, they will not be automatically passed down. In order to make these props accessible to the wrapped component, you need to map them from the second argument in the mapStateToProps function.

Review.enhancer.js

const mapStateToProps =  (state, ownProps) => {
    return { 
        review: ownProps.review,
    };
};

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

Now only the review prop is being passed down to the wrapped component. However, you should try to avoid doing this, because it couples the enhancer to the container component.

Note that if you want to pass all the props to the wrapped component, you can omit the parentheses from the arrow function and use an implicit return.