与redux形成反应(Form with redux in react)

与redux形成反应(Form with redux in react)

所以我已经使用react和redux做了一个表单。 但是，我不确定我完全理解商店和提供商。 以下是我的组件的代码。 为了便于阅读，我省略了导入。

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)

现在，我已经发现，如果我用下面的代码替换index.js，它会显示出来，但这对于我的项目其余部分的结构并不理想。

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;

有没有一种方法可以使我可以像使用我的根App组件那样调用此组件，即：

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

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;

最满意答案

只要你的组件是Provider组件的后代，你应该是好的。

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

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, );