Как передать состояние как избыточное действие

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

Я хочу иметь возможность запускать функцию 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.info(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});
            });
    }
}

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

и вернется

state.posts.filter is not a function or something along those lines.

редуктор.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
    }
}

Как мне передать состояние действиям, чтобы я мог обновить состояние на редукторе?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
567
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I'm trying to find a way to pass a state to an action or a reduce

То, как вы написали свой код действий, указывает на то, что вы используете избыточный преобразователь, что означает, что вы можете получить доступ к функции 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)
    })
  }

Выше вы фильтруете сообщения после того, как вы уже отфильтровали/удалили их из избыточности (т.е. вы дважды фильтруете без необходимости). Вместо этого вы должны просто получать состояние непосредственно из избыточности

Посмотрите здесь. Например, это используется в более надежных условиях. Я бы направил вас к этому пример. Например, посмотрите на src/containers/visibleTodoList

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


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

state.posts.filter is not a function or something along those lines.

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

Спасибо за это. Мне нужен способ передать состояние posts действию, и я могу сделать это с помощью getState, верно?

randal 13.04.2019 05:46

ошибка, которую я получаю, это Unhandled Rejection (TypeError): state.filter is not a function

randal 13.04.2019 05:53

но я, вероятно, получаю это, потому что я не использую getState для получения сообщений.

randal 13.04.2019 05:59

да! getState в действии сообщений получит состояние. Смотрите, в вашем сообщении об ошибке вы вызываете фильтр по состоянию, которое НЕ является массивом. Вы должны вызывать его на state.posts (который является массивом)

Matthew Liu 13.04.2019 09:58

Другие вопросы по теме