Form with redux in react

Question

So I have made a form using react and redux. However, I'm not sure I totally understand store and Provider. Below is the code for my component. I've omitted imports for readability.

const validate = values => {
  const errors = {}
  const requiredFields = [
    'Brukernavn',
    'epost',
    'rolle'
  ]
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required'
    }
  })
  if (
    values.epost &&
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.epost)
  ) {
    errors.epost = 'Ugyldig E-post!'
  }
  return errors
}

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />
)


const renderRadioGroup = ({ input, ...rest }) => (
  <RadioButtonGroup
    {...input}
    {...rest}
    valueSelected={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
)

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <SelectField
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    onChange={(event, index, value) => input.onChange(value)}
    children={children}
    {...custom}
  />
)

const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="brukernavn"
          component={renderTextField}
          label="Brukernavn"
        />
      </div>
      <div>
        <Field name="epost" component={renderTextField} label="E-Post" />
      </div>
      <div>
        <Field name="rolle" component={renderRadioGroup}>
          <RadioButton value="Student" label="Student" />
          <RadioButton value="Helsepersonell" label="Helsepersonell" />
        </Field>
      </div>
        <div>
        <Submitbutton fieldName="Submit" id="submitForSignup" disabled={pristine || submitting} />
      {/*  <Submitbutton type="button" disabled={pristine || submitting} onClick={reset} /> */}
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'MaterialUiForm', // Formens ID
  validate,
})(MaterialUiForm)

Now, I've figured out that if I replace my index.js with the following, it shows up, but that's not ideal for the structure of the rest of my project.

const rootEl = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div style={{ padding: 15 }}>
        <h2>Velkommen til GloBro!</h2>

        <MaterialUiForm onSubmit={showResults} />
        <Values form="MaterialUiForm" />
      </div>
    </MuiThemeProvider>
  </Provider>,
  rootEl,
);

export default rootEl;

Is there a way that makes it possible for me to call this component as with any other from my root App component, i.e;

class App extends Component {
  render() {
    return (
      <div className="App" style={{display: 'flex', justifyContent: 'left', }}>
        <Login />
      </div>
    );
  }
}
export default App;

Answer 1

So long as your component is a descendant of the Provider component, you should be good.

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <App />
    </MuiThemeProvider>
  </Provider>,
  rootEl,
);