soy un novato en reaccionar, biblioteca redux-saga, así que estoy luchando para resolver este problema ...
así que tengo este componente. uso api para buscar, eliminar datos con redux-saga.
export class ExampleComponent extends React.Component { constructor() { super(props); this.props.getList(); } handleClick(value) { this.props.deleteFromList(value); } render() { if (this.props.isFetched) { return ( this.props.list.map( (value, i) => { <button onClick={this.handleClick.bind(this, value)}> {value} </button> } ); ); } return <div><h1>Fetching list...</h1></div>; } } ExampleComponent.propTypes = { list: React.PropTypes.array, isFetched: React.PropTypes.bool, getListAction: React.PropTypes.func, deleteFromListAction: React.PropTypes.func, }; export function mapDispatchToProps(dispatch) { return { getList: () => dispatch(getListAction()), deleteFromList: (id) => dispatch(deleteFromListAction(id)); }; } const mapStateToProps = createStructuredSelector({ list: selectList(), isFetched: selectIsFetched(), }); export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);así que cuando se cargan los datos, traté de hacer clic para activar el evento onClick on button. y la acción de eliminación es exitosa y el registro se elimina de db.pero la vista no se actualiza, por lo que cuando actualicé el navegador, se eliminó el botón en el que se hizo clic.
Entonces, ¿cómo hago para que mi componente se actualice automáticamente cuando agrego o elimino datos? Gracias por tu tiempo y espero que puedas ayudarme a resolver esto T_T
Su componente no se actualizará a menos que haya un cambio en su estado. Como ha notado, hay un cambio en la base de datos, pero no hay cambios en el estado de su tienda redux, específicamente en su lista seleccionada.
Entonces, lo que deberá hacer es esperar a que la eliminación de la base de datos sea exitosa, luego puede enviar otra acción para obtener su lista seleccionada. La nueva lista sería diferente de su lista original y, por lo tanto, su componente se actualizaría.
export function* deleteSaga (action) { yield call(deleteDataRequest) yield put(FETCH_LIST); }Sagas hace que este tipo de control de flujo sea bastante fácil, ya que su solicitud DELETE se puede producir y luego puede PONER una acción de búsqueda después de su DELETE.
Esta es solo una posible solución. Pero con suerte, te indicará la dirección de lo que debes hacer.