Showing different sub-form based on user input
Remember there was a call to this.get_meta_widget
?
So again, the advantage of using redux is that it always keep the latest state of the application. By using react-redux, it always re-render the components that receives a different set of properties.
Here is what get_meta_widget
does
get_meta_widget() { let result; switch (this.props.publication.type) { case "journal": result = ( <Journal delegate_update={this.handle_update} definition={this.props.publication.meta || {}} /> ); break; case "book": result = ( <Book delegate_update={this.handle_update} definition={this.props.publication.meta || {}} /> ); break; default: result = ""; } get_meta_widget() { let result; switch (this.props.publication.type) { case "journal": result = ( <Journal delegate_update={this.handle_update} definition={this.props.publication.meta || {}} /> ); break; case "book": result = ( <Book delegate_update={this.handle_update} definition={this.props.publication.meta || {}} /> ); break; default: result = ""; } return result; } return result; }
There you have it, there’s no need to notify the component when the user made changes through the select box (refer to the previous page). As the state changes, the component will re-render itself, and a different component is then inserted into the form automatically.
On the component reuse
So in the publication meta field (refer to the problem statement in the first page, there is another list of people, this time as editors. So we can now insert the Persons
component, very similar to what we did with authors previously (in the previous page).
<Persons delegate_update={this.handle_update} field="editors" legend="Editors" persons={this.props.definition.editors || [{}]} />
and the respective handle_update
handle_update(_, changes) { return this.props.delegate_update(false, { meta: Object.assign({}, this.props.definition, changes) }); }
Which is very similar to what we did in other components. It is just the matter of generating a new entity via Object.assign
calls, integrate the changes to the parent form through delegate_update
property method. Then the child component can generate the new state without having to know what the parent component looks like, then dispatch the new revision to redux.
The complete code can be found at my github repository. Feel free to leave me a comment here or an issue on github so we can discuss further into this.