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

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。并且删除操作成功并且记录从 db.but 中删除视图未更新因此当我刷新浏览器时单击的按钮已被删除。

那么如何让我的组件在我添加、删除数据时自动更新？谢谢你的时间，我希望你能帮我解决这个问题 T_T

Answer 1

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

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

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

Sagas 使这种流控制变得非常简单，因为可以生成您的 DELETE 请求，然后您可以在 DELETE 之后放置一个获取操作。

这只是一种可能的解决方案。但希望它能为您指出您需要做的事情的方向。

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

How to make my component re render after updating props from selector in react and redux-saga?

reactjs

redux-saga

react-redux