在React中使用PropTypes将字符串值作为对象传递给Redux组件

Question

A component using Redux example from React Final Form was created in index.js .

<FormStateFromRedux valueName="valueString" form="counter" />

It is using redux to track values, using prop-types it should receive object name to return exact object value:

const FormStateFromRedux = ({ state, valueName }) => (
  <p>{state.values.valueName}</p>
)

export default connect((state, ownProps) => ({
  state: getFormState(state, ownProps.form)
}))(FormStateFromRedux)

 FormStateFromRedux.propTypes = {
  valueName: PropTypes.objectOf(PropTypes.string)
};

It is possible to return value when object path is set manually, here I want to make reusable component to return values using PropTypes but don't know what kind of type to choose. Is it possible to pass value as string? May someone know what should be correct approach in this case?

UPDATE

It is possible to get string value inside object using []

const FormStateFromRedux = ({ state, valueName }) => ( <p>{state.values[valueName]}</p> )

Answer 1

You should avoid passing whole form state to component. Component should have only necessary props.

const FormStateFromRedux = ({ valueName }) => ( <p>{valueName}</p> );

export default connect((state, props) => {
  const formState = getFormState(state, props.form);
  const { value : { valueName } } = formState;
  return { valueName };
})(FormStateFromRedux);

FormStateFromRedux.propTypes = {
  valueName: PropTypes.string
};