Dave Newton Dave Newton - 1 month ago 16
Javascript Question

redux-form's custom field component receiving props but not state props from its redux mapped dispatch

I'm implementing functionality similar to SO's question search when asking a new question, i.e., type stuff and "similar" items show up. My initial implementation is custom–no React autocomplete (which may be a mistake).

I currently have the following redux-form field:

<Field label="Name" name="test['name']" component={TestNameField} type="text" />


<TestNameField>
renders two components, the input and (optionally) the similar items:

render = () => {
const inputOnChange = this.props.input.onChange
, onChange = (...args) => { inputOnChange(...args); this.onChange(...args) }
, similarTests = this.props.similarTests

return (
<div>
<SimpleField {...this.props} onChange={onChange} />
<SimilarTests similarTests={similarTests} />
</div>
)
}


<TestNameField>
uses redux connect
mapStateToProps
:

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

export default connect(mapStateToProps, { fetchTestsSimilarTo })(TestNameField)


This all works fine; the value is reflected correctly in redux-form's state, my change event fires, the correct calls are made, etc.

I can see the updated state of my "autocomplete" results in the redux store, but they're not available in the
TestNameField
's props, because redux-form is passing in the props.

I need
<TestNameField>
to be a standalone component, e.g., not tied to a specific redux-form form or
Field
, preferably not tied to redux-form at all–I will be using it elsewhere. I want its matches and match loading process to be completely separated from other app functionality.

Is this possible? Is this reasonable? I'm fine with other solutions or component hierarchy that match my criteria and work. It wasn't clear to me what the best approach would end up being.

Answer

I ended up sending the input value to <SimilarTests /> instead of lookup results, e.g.,

<SimilarTests forValue={this.state.currentValue} />

I believe I can still use any of several throttling/debouncing methods including a wrapper component or handling it at the Redux action layer.

Not sure if this is an ideal solution, but it's functional for now.

That said I'm switching to a forked auto-suggest anyway for unrelated reasons.