Me gustaría pasar datos de mi estado a una llamada de búsqueda (por ejemplo, término de búsqueda). Cuando el estado cambia, debería recuperar mis datos.
Los métodos del ciclo de vida parecen ser el lugar para hacer esto, pero cuando los uso, no hacen nada (se llama al renderizado antes del cambio de estado), o continúa en un ciclo sin fin.
Aquí está mi código simplificado:
@connect((store) => { return { collections : store.collections.collections } }, { fetchCollections }) export default class CollectionPane extends Component { constructor(props){ super(props); this.state = { term : null } } componentWillMount(){ this.handleFetchCollections(this.state.term); // This loads initial ok } componentDidUpdate(){ // this.handleFetchCollections(this.state.term); // This causes loop } handleFetchCollections(props, sort){ log('Fetching...', 'green'); this.props.fetchCollections(props, sort); } onSearch(){ const term = "test example"; this.setState({ term }) } render(){ const { collections } = this.props; return ( <div> <a style={{ display: "block", padding: "1em" }} onClick={this.onSearch.bind(this)}>Search</a> <CollectionList collections={collections} /> </div> ); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>Debe comparar su nuevo estado con el estado anterior antes de realizar la búsqueda:
componentDidUpdate(prevProps, prevState) { if (prevState.term !== this.state.term) { this.handleFetchCollections(this.state.term); } }Con react-redux deberías cambiar tu estado a través de acciones y reductores. Luego puede usar acciones asíncronas como se describe aquí: http://redux.js.org/docs/advanced/AsyncActions.html