Question

我正在尝试寻找一种将状态传递给动作或简化器的方法。例如

我希望能够在操作上运行onDelete函数，然后更新reducer上的状态。但是，为了使其正常工作，我需要过滤所有帖子，然后才能删除帖子。

class Posts extends Component {
  state = {
      posts: [],
      loading: true,
  }

  getPosts = () => {
    Axios.get(process.env.REACT_APP_GET_POSTS)
    .then( (res) => {
       this.setState({
          posts: res.data,
          loading: false
        })
    })
    // console.log(this.state.posts);
  }
  componentWillMount(){
    this.getPosts();
  }

 // run this logic on the reducer or on actions.
  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }
  render() {
   const {loading, posts} = this.state;
    if (!this.props.isAuthenticated) {
      return (<Redirect to='/signIn' />);
    }
    if(loading){
      return "loading..."
    }
    return (
      <div className="App" style={Styles.wrapper}>
        <h1> Posts </h1>
        <PostList DeletePost={this.onDelete} posts={posts}/>
      </div>
    );
  }
}

这是尝试执行一项在技术上可行的动作的尝试。

动作

export const DeletePost =  (id) => { 
    return (dispatch) => {
       return Axios.post(`/api/posts/delete/${id}`)
            .then( () => {
                dispatch({type: DELETE_POST, id});
            });
    }
}

然后，我们解决在reducer上实际获取职位的问题。问题在于，reducer不知道帖子来自何处，它是未定义的。所以我想知道如何将状态传递给减速器。

并将返回

state.posts.filter不是函数或类似的东西。

reducer.js

import { DELETE_POST} from '../actions/';

const initialState = {
    post: [],
    postError: null,
    posts:[]
}

export default (state = initialState, action) => {
    switch (action.type) {

        case DELETE_POST:
            return ({
                ...state,
               posts: state.posts.filter(post=> post.id !== action.id)
            })
        default:
            return state
    }
}

我如何将状态传递给操作，以便能够在化简器上更新状态？

Answer 1

我正试图找到一种将状态传递给动作或减少动作的方法

编写动作代码的方式表明您正在使用redux thunk，这意味着您可以在动作中访问getState函数。 getState的示例用法是here

export const DeletePost =  (id) => { 
    return (dispatch, getState) => {
       return Axios.post(`/api/posts/delete/${id}`)
            .then( () => {
                dispatch({type: DELETE_POST, id});
            });
    }
}

您已经可以访问化简代码中的状态。它叫state！

现在，以上可能结束了答案。但是我在问你在课堂上做什么的前提。

 // run this logic on the reducer or on actions.
  onDelete = (id) => {
    Axios.post(`/api/posts/delete/${id}`);
    this.setState({
      posts: this.state.posts.filter(post => post.id !== id)
    })
  }

在您已从redux过滤/删除帖子后，您正在过滤帖子（例如，您不必要过滤两次）。相反，您应该直接从redux

获取状态。

看看here。例如，在更强大的设置中使用此示例。我将引导您到此example。对于示例，请查看src/containers/visibleTodoList

因此，实际上，posts应该只与redux一起使用，而不应包含在类组件中！

最后是您看到的错误

state.posts.filter不是函数或类似的东西。

您能给出确切的错误吗？您的减速器代码看起来还不错。

如何将状态作为Redux动作传递

1 个答案: