Как передать состояние как редукционное действие

Question

Я пытаюсь найти способ передать состояние действию или редуктору. Например

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

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>
    );
  }
}

Вот попытка совершить действие, которое технически работает.

1010 * действия *

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

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

и вернется

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 здесь

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

Взгляните здесь . Для примера это используется в более надежной обстановке. Я бы направил вас к этому примеру . Для примера посмотрите на src/containers/visibleTodoList

Так что на самом деле для того, что вы делаете, posts должен просто жить с избыточностью, а не с компонентом класса!

---

Наконец, за ошибку, которую вы видели

state.posts.filter не является функцией или чем-то подобным.

Не могли бы вы дать точную ошибку? ваш код редуктора кажется нормальным.