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

我建议您克隆现有状态，然后将新操作有效内容添加到克隆版本。

这可以通过以下方式完成。

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

Answer 2

感谢您的回答，但我认为我发现了问题。这个API是假的API，例如模拟//setting the amount of data we want to render in each page this.perPage = new ReactiveVar(Number(self.data.perPage) || 10);，当您使用post request时，API不会将您的请求保存在他们的服务器上，问题出在这里。

但是，这些家伙他们已经建立了一个post request直接在你的localhost工作，你可以做一个真正的GET，POST，PULL或任何你想要的。

谢谢你们！

当我使用REACT / REDUX创建新帖子时，API刷新后不允许新帖子

2 个答案: