Когда я создаю новое сообщение с помощью REACT / REDUX, API обновляется и не разрешает новое сообщение после

Question

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

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

Итак, когда я вхожу в FormContainer (он содержит форму), я добавил некоторую информацию, такую ​​как заголовок и сообщение, я нажимаю кнопку подтверждения, и после этого я перенаправляю на / (Домой) И яможете увидеть новый пост.Но если я снова нажму create a new post ?, я снова создаю новый пост, предыдущий пост удаляется, а текущий здесь.

И я не понимаю, почему ... Пожалуйста, проверьте код внутри, Если вы хотите больше кода, я могу дать вам.

Я использую JSON PLACEHOLDER API для запроса пост.

Я создал редуктор Posts-reducer.js

import {
  FETCH_POSTS,
  ERROR_FETCH_POSTS,
  DELETE_FETCH_POSTS,
  CREATE_POST
} from "../actions/actions-type";

export default (state = [], actions) => {
  switch (actions.type) {
    case FETCH_POSTS:
      return actions.payload;
    case ERROR_FETCH_POSTS:
      return actions.error;
    case DELETE_FETCH_POSTS:
      return state.filter(post => {
        if (post.id === actions.payload.id) {
          return false;
        } else {
          return true;
        }
      });
    case CREATE_POST:
      return [...state, actions.payload];
    default:
      return state;
  }
};

И я также создал для каждого type action действие:

import {
  FETCH_POSTS,
  ERROR_FETCH_POSTS,
  ACTIVE_POST,
  DELETE_FETCH_POSTS,
  CREATE_POST
} from "./actions-type";
import axios from "axios";

export function fetch_posts() {
  return dispatch => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts?_limit=10")
      .then(res => {
        dispatch({ type: FETCH_POSTS, payload: res.data });
      });
  };
}

export function delete_fetch_posts(id) {
  return dispatch => {
    axios(`https://jsonplaceholder.typicode.com/posts/${id}`, {
      method: "DELETE"
    }).then(res => {
      dispatch({
        type: DELETE_FETCH_POSTS,
        payload: {
          id,
          loading: true
        }
      });
    });
  };
}

export function active_post(id) {
  return dispatch => {
    axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`).then(res => {
      dispatch({ type: ACTIVE_POST, payload: res.data });
    });
  };
}

export function create_post(post) {
  return dispatch => {
    axios
      .post("https://jsonplaceholder.typicode.com/posts/", {
        ...post
      })
      .then(res => dispatch({ type: CREATE_POST, payload: res.data }));
  };
}

И я хотел бы показать вам различные маршруты:

class Routes extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Posts} />
            <Route path="/createpost" component={FormContainer} />
            <Route path="/post/:id" component={Post} />
            <Route path="*" component={RouteNotFound} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default Routes;

Answer 1

Спасибо за ваш ответ, но я думаю, что нашел проблему.Этот API является поддельным API, который имитирует, например, post request, а при использовании post request API не сохраняет ваш запрос на своем сервере, и проблема здесь.

Но у этих ребят есть json-server, которые работают на вашем локальном хосте напрямую, и вы можете сделать реальный GET, POST, PULL или что угодно.

Так что спасибо вам, ребята!

Answer 2

Я предлагаю вам клонировать существующее состояние, а затем добавить новую полезную нагрузку действия в клонированную версию.

Это можно сделать с помощью ниже.

case CREATE_POST: {
    let clonedState = [...state];
    clonedState.push(action.payload);
    return clonedState;
}