Geek Answers Handbook

What is the best way to create Redux text input

I Created a simple component of a text field using a reduction reaction.

This is a dumb component, so it gets a callback function to send the change.

Therefore, with each change, it changes its local state, and on Blur, it calls the callback function.

I think that I am doing too much for such a simple task, it seems like overkill, is there a better / shorter way to implement it?

export default class CreativeName extends Component { constructor(props) { super(props); this.state = { creativeName: props.creativeName }; } componentWillReceiveProps(nextProps) { this.setState({ creativeName: nextProps.creativeName }); } onBlur() { this.props.updateDraft('creativeName', this.state.creativeName); } onChange(e) {`enter code here` this.setState({creativeName: e.target.value}); } render() { return ( <Row> <Col lg={12} className="row-margin"> <ControlLabel>*Name</ControlLabel> <div className="campaign-name"> <FormControl value={this.state.creativeName} type="text" onChange={(e) => this.onChange(e)} onBlur={(e) => this.onBlur(e)} className="campaign-name-text-field" /> </div> </Col> </Row> ); } }
+5
source share
2 answers

I really recommend using redux-form . redux-form keep input values ​​global. In redux-from , you can have very convenient input tags for responsive components.

For instance:

 import React, { Component, PropTypes} from 'react'; export default class FormInputTextBox extends Component { static PropTypes = { field: PropTypes.object.isRequired, placeholder: PropTypes.string, disabled: PropTypes.bool } render() { const {field, placeholder, disabled} = this.props; return ( <div> <input type="text" {...field} placeholder={placeholder} disabled={disabled} /> </div> ); } }
+4
source

I use the connect function provided by react-redux . I would redo your code to look something like this (ES6 syntax):

container.js

 import {connect} from 'react-redux' import {presenter} from './presenter' import {actions} from '../../loader' const mapStateToProps = (state, props) =>({ creativeName: props.creativeName }) const mapDispatchToProps = (dispatch) =>({ updateDraft : (creativeName) => dispatch(actions.updateDraft('creativeName', creativeName)) }) const container = connect(mapStateToProps, mapDispatchToProps)(presenter) export { container }

actions above are just a file containing the standard Action Action creators.

presenter.js

 function presenter ({creativeName}, updateDraft) { const onBlur=e=>updateDraft(e.target.value) return ( <Row> <Col lg={12} className="row-margin"> <ControlLabel>*Name</ControlLabel> <div className="campaign-name"> <FormControl value={creativeName} type="text" onBlur={e=>onBlur(e)} className="campaign-name-text-field" /> </div> </Col> </Row> ) } export { presenter }

In truth, I would not use any local state at all and instead use a selector (see reselect ) to pull the local state of components from the global state, a bit like this:

presenter.js - mapStateToProps

 import {actions, services} from '../../loader' const mapStateToProps = (state) =>({ state: services.CreativeName.selector.getAll(state) })

Of course, this is a great way to do things, I prefer it, but I'm not sure if this is easier.

+1
source

More articles:


All Articles