Я пытаюсь найти способ передать состояние действию или редуктору. Например
Я хочу иметь возможность запускать функцию 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
}
}
Как мне передать состояние действиям, чтобы я мог обновить состояние на редукторе?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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.
Не могли бы вы указать точную ошибку? ваш код редуктора кажется прекрасным.
ошибка, которую я получаю, это Unhandled Rejection (TypeError): state.filter is not a function
но я, вероятно, получаю это, потому что я не использую getState для получения сообщений.
да! getState в действии сообщений получит состояние. Смотрите, в вашем сообщении об ошибке вы вызываете фильтр по состоянию, которое НЕ является массивом. Вы должны вызывать его на state.posts (который является массивом)
Спасибо за это. Мне нужен способ передать состояние
postsдействию, и я могу сделать это с помощью getState, верно?