CODEWITHSUNDEEP
javascriptreactjsreduxreact-proptypes
Ant
Ant

Reputation: 1

Redux best practices for PropTypes location

was wondering if it's better to put propType definitions in the containers with all the prop logic or the presenter where the props will actually be used. I can see arguments for both.

In the containers allows you to keep track of all the prop logic all in one place while in the presenters confirms they will be used properly.

Thanks for the input.

Update for clarity

example-container.js

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

import ButtonPresenter from './some/file';

const mapStateToProps = (store, props) => {
  return ({
    example: Number(5),
  });
};

const mapDispatchToProps = (dispatch, props) => ({
  onClick: id => { console.log(id) },
});

ButtonPresenter.propTypes = {
  onClick: PropTypes.func.isRequired,
  example: PropTypes.number.isRequired,
}

const ButtonContainer = connect(mapStateToProps, mapDispatchToProps)(BoxPresenter);

export default ButtonContainer;

pros

all logic is in 1 location

2 different containers could work with a presenter

cons

presenter may need a type not known by just the container array for map

example-presenter.js

import React from 'react';
import PropTypes from 'prop-types';

const ButtonPresenter = ({example, onClick}) => {
  return (
    <button onClick={onClick}>{example}</button>
  );
};

ButtonPresenter.propTypes = {
  onClick: PropTypes.func.isRequired,
  example: PropTypes.number.isRequired,
}

export default ButtonPresenter;

pros

propTypes written in 1 place for everything using the presenter

cons

not as flexable, propTypes could be seen as logic then logic is in both container and presenters

Upvotes: 0

Views: 818

Answers (2)

Rafael Grilli
Rafael Grilli

Reputation: 2039

If it's a Class Component, I like to leave the propTypes and defaultProps at the very top after the class creation:

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
    static propTypes = {
        prop1: PropTypes.string.isRequired,
        prop2: PropTypes.bool,
        prop3: PropTypes.func
    };

    defaultProps = {
        prop2: false,
        prop3: () => {}
    };

    constructor() {}
    render() {}
}

export default MyComponent;

Or for a Functional Component, I like to create the variables and leave them after the imports:

import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
    prop1: PropTypes.string.isRequired,
    prop2: PropTypes.bool,
    prop3: PropTypes.func
};

const defaultProps = {
    prop2: false,
    prop3: () => {}
};

const MyComponent = props => {

}

MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;

export default MyComponent;

So it makes very clear what you should pass to the component via props. It's kind of a Summary for your component.

Upvotes: 2

Jaime Agudo
Jaime Agudo

Reputation: 8296

I don't see the relation between Redux and PropTypes on your question.

Anyway I would specify PropTypes on any React component that would be likely to be reused/consumed. It doesn't make sense to me to do it on the highest components that are bound to the store

This could be opinion based though

[edited:]
I might be missing something but afaik only the root component (higher on the hierarchy) should be bound to the store. Therefore I don't see how you are going to consume it anywhere else and thus pass properties to it. Summarising, only the second snippet makes sense to me, the API of the component is self contained within the file, making the contract clear. eiffel.com/values/design-by-contract

Upvotes: 0

Related Questions