Как сделать, чтобы мой компонент повторно отображался после обновления реквизита из селектора в реакции и редукционной саге?

Я новичок в библиотеке реагирования, редукционной саги, поэтому я изо всех сил пытаюсь решить эту проблему...

так что у меня есть этот компонент. я использую API для извлечения и удаления данных с помощью 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);

поэтому, когда данные загружены, я попытался щелкнуть, чтобы вызвать событие onClick on button. и действие удаления выполнено успешно, и запись удалена из базы данных, но представление не обновляется, поэтому, когда я обновил браузер, нажатая кнопка была удалена.

Итак, как мне сделать так, чтобы мой компонент автоматически обновлялся при добавлении или удалении данных? Спасибо за ваше время, и я надеюсь, что вы поможете мне решить эту проблему T_T


reactjs react-redux redux-saga
person Reza Adha Hamonangan    schedule 20.01.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ваш компонент не будет обновляться, если не изменится ваше состояние. Как вы заметили, в БД есть изменения, но нет никаких изменений в вашем состоянии хранилища избыточности, в частности, в вашем selectedList.

Итак, что вам нужно сделать, это дождаться успешного удаления БД, а затем вы можете отправить другое действие для получения выбранного списка. Новый список будет отличаться от вашего исходного списка, поэтому ваш компонент будет обновляться.

export function* deleteSaga (action) {
    yield call(deleteDataRequest)
    yield put(FETCH_LIST);
}

Саги делают этот вид управления потоком довольно простым, поскольку ваш запрос DELETE может быть получен, а затем вы можете ПОСТАВИТЬ действие выборки после вашего DELETE.

Это только одно из возможных решений. Но, надеюсь, это укажет вам направление того, что вам нужно делать.

person epikhighs    schedule 20.01.2017
comment
я пытался добавить yield put fetch_list в мой deleteSaga, но мой компонент не обновлялся сам по себе, и его все еще нужно обновить в браузере - person Reza Adha Hamonangan; 23.01.2017