Question

我正在尝试将登录从简单调用迁移到API到saga。当我收到数据时，我只想从中删除一个元素并且不重新加载所有列表，这个逻辑正在使用call.then改变状态的方法。（注释代码）我的问题是如何改变状态在控制器中以获得此结果。谢谢。

＆＃13;

import React, {Component, PropTypes} from 'react';
import {connect} from "react-redux";
import {fetchBlogPosts, deleteBlogPost} from '../../connectivity/blog/api.blog-post';
import Table from '../../components/BlogPost/Table';
import * as types from '../../constants/actionTypes';
import {REQUESTS} from '../../sagas/blog/list.blog.saga'

class List extends Component {

  constructor(props) {
    super(props);

    this.state = {
      blogPosts: []
    };
  }

  componentDidMount() {
    //method without saga
    // fetchBlogPosts()
    //   .then((data) => {
    //     this.setState(state => {
    //       state.blogPosts = data;
    //       return state;
    //     });
    //   })
    //   .catch((err) => {
    //     console.error('err', err);
    //   });

    this.props.dispatch({
      type: types.BLOGPOSTS__REQUESTED,
      payload: {
        blog: this.props.blogPosts
      }
    });
  }

  onDelete(id) {
    //method without saga
    // deleteBlogPost(id)
    //   .then((data) => {
    //     let blogPosts = this.state.blogPosts.filter((post) => {
    //       return id !== post.id;
    //     });
    //
    //     this.setState(state => {
    //       state.blogPosts = blogPosts;
    //       return state;
    //     });
    //   })
    //   .catch((err) => {
    //     console.error('err', err);
    //   });
    this.props.dispatch({
      type: types.BLOGPOST__DELETED__REQUESTED,
      payload: {
        blogPostId: id
      }
    });
  }

  render() {
    const isSubmitting = this.props.pageState.request.inProgress.indexOf(REQUESTS.BLOGPOSTS__DOREQUESTBLOGPOSTS__SAGA) > -1;
    // let blogPosts = this.state.blogPosts;
    let blogPosts = this.props.blogPosts;

    return (
      <div>
        <h3>BLOG POSTS: </h3>
        <Table blogPosts={blogPosts}
               onDelete={this.onDelete.bind(this)}
               auth={this.props.auth}
               isSubmitting={isSubmitting}
        />
      </div>
    );
  }
}

List.propTypes = {
  dispatch: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  pageState: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    auth: state.auth,
    blogPosts: state.blog.blogPosts,
    pageState: state
  };
}

export default connect(
  mapStateToProps
)(List);

＆＃13;

Answer 1

我已经修复了我的问题，发送了一个未过滤的列表来删除saga中的操作，在我过滤后，我将其发送回有效负载。

onDelete(id) {
    this.props.dispatch({
      type: types.BLOGPOST__DELETED__REQUESTED,
      payload: {
        blogPostId: id,
        fullBlogPosts: this.props.blogPosts
      }
    });
  }

佐贺：

export function *doDeleteBlogPost(action) {

  try {

    const {blogPostId, fullBlogPosts} = action.payload;

    yield put({
      type: types.REQUEST__STARTED,
      payload: {
        requestFrom: REQUESTS.BLOGPOSTS__DODELETEBLOGPOST__SAGA
      }
    });

    const responseBody = yield call(api.deleteBlogPost, blogPostId);
    const blogPosts = fullBlogPosts.filter((post) => {
            return blogPostId !== post.id;
          });

    yield put({
      type: types.BLOGPOST__DELETED__SUCCEEDED,
      payload: {
        message: responseBody,
        blogPosts
      }
    }); ...

React Redux更改容器中的状态

1 个答案: