Set local state of component with Redux props given from mapStateToProps()

Question

I've got a list of input value that i need to populate with the info returned from dispatch function... I can't set the state inside componentWillMount because I need to wait that the reducer return info to the state.

Inside componentWillMount method dispatch the call to get data

componentWillMount() {
        this.props.getData(this.props.params.id);
 }

Inside componentWillReceiveProps method I set the local state using the props returned as data I put the setState() code inside this method to be sure that was executed after connect() has merged the data inside local props. (Any better place to do it?)

 componentWillReceiveProps(nextProps) {
        if (nextProps.data) {
            this.setState({
                contact: nextProps.data.contact,
                number: nextProps.data.number,
                date: nextProps.data.date,
                payment: nextProps.data.payment,
                fields: nextProps.data.fields
            });
        }
}

Then I render the fields giving them as value the state

renderInputFields() {
        if (this.state.fields) {
            return this.state.fields.map(function(field, index) {
                return (
                    <div key={'line-' + index}>

                        <input key={'quantity-' + index}
                               type="text"
                               id={index}
                               name="quantity"
                               placeholder="Add quantity"
                               value={field.quantity}
                               onChange={this.onFieldChange} />

                        <input key={'description-' + index}
                               type="text"
                               id={index}
                               name="description"
                               placeholder="Add description"
                               value={field.description}
                               onChange={this.onFieldChange} />

                        <input key={'price-' + index}
                               type="text"
                               id={index}
                               name="price"
                               placeholder="Add price"
                               value={field.price}
                               onChange={this.onFieldChange} />
                        <a onClick={this.onAddField}>
                            <i className="fa fa-times" aria-hidden="true"></i>
                        </a>

                    </div>
                )
            }, this);
        }
    }

const mapStateToProps = (state) => {
    return {
        data: state.data.selected
    }
}

export default connect(mapStateToProps, { getData, updateDate, genData, deleteData })(DataEditor);

Now the question:

Is this a good practice to get the result that I need?

john_omalley john_omalley · Accepted Answer · 2017-02-19T21:43:19

With Redux you should default to using stateless components. Copying state from props is an anti-pattern regardless of whether you're using redux or not but it's definitely not what you want to do with redux.

It may seem that having stateless components seems inefficient - especially with input fields like you have here. But it isn't. The virtual DOM will ensure that your keystrokes in your input fields end up having no effect on the DOM (since it's already in sync).

Also, with Redux you don't typically kick off an Ajax request from componentWillMount. Typically you dispatch an action at an appropriate time (app startup, or if you're using react-router an 'enter' event for a route).

Set local state of component with Redux props given from mapStateToProps()

1 Answers