Runtime Type Checking with PropTypes

Use React's PropTypes to ensure components receive the correct types from the Redux store, showcasing an example with mapStateToProps.

import PropTypes from 'prop-types';
import { connect } from 'react-redux';

// Define your React component
const UserProfile = ({ user }) => (
    <div>
        <h1>{user.name}</h1>
        <p>Email: {user.email}</p>
    </div>
);

// Define the PropTypes
UserProfile.propTypes = {
    user: PropTypes.shape({
        name: PropTypes.string,
        email: PropTypes.string
    }).isRequired
};

This piece of code imports PropTypes and the connect function from 'react-redux'. It then defines a React component called UserProfile which expects a user object. The PropTypes for UserProfile are then defined to ensure that the 'user' prop is an object containing a string 'name' and a string 'email', and it is required.

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

The mapStateToProps function takes the state from the Redux store and maps the state's user property to the 'user' prop of the UserProfile component.

export default connect(mapStateToProps)(UserProfile);

This line connects the UserProfile component to the Redux store using the connect function with the mapStateToProps to feed the correct piece of state into the UserProfile's props.