Question

我是react，redux-saga图书馆的新手，所以我很难解决这个问题......

所以我有这个组件。我用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按钮。删除操作成功，并从db中删除记录。但视图未更新，因此当我刷新浏览器时，单击的按钮已被删除。

那么当我添加，删除数据时，如何使我的组件自动更新？感谢您的时间，我希望您能帮我解决这个问题。

Answer 1

除非您的州发生变更，否则您的组件不会更新。正如您所注意到的，数据库中存在更改，但您的redux存储状态没有任何变化，特别是您的selectedList。

因此，您需要做的是等待数据库删除成功，然后您可以发送另一个操作来获取所选列表。新列表与原始列表不同，因此您的组件将刷新。

{{1}}

Sagas使这种流量控制变得非常简单，因为你的DELETE请求可以产生，然后你可以在DELETE之后进行一次获取操作。

这只是一个潜在的解决方案。但希望它能指出你需要做的事情。

如何在react和redux-saga中从选择器更新道具后重新渲染我的组件？

1 个答案: