当我在反应中更改商店时道具不更新

Question

我有一个问题，当我从 API 获取数据并更新存储时，数据没有改变。 它被绑定为一个道具，我认为它应该改变，我注意到的另一件事是它在商店更新后没有调用 mapStateToProps 。 当我给商店提供一些初始值时，它会显示它，所以我认为它可以看到商店，显然其他东西是错误的，但我不知道是什么。

减速机代码：

import { ADD_POST } from "../actions/addAction";
import { GET_POSTS } from "../actions/getAction";
import { DELETE_POST } from "../actions/deleteAction";
import { UPDATE_POST } from "../actions/updateAction";
import axios from "axios";

const initialState = {
  posts: []
};

export default function postsReducer(state = initialState, { type, payload }) {
  switch (type) {
    case ADD_POST:
      state = state.slice();
      state.push(payload);
      break;
    case GET_POSTS:
      axios
        .get("http://localhost:59511/api/post?date=31-12-2019")
        .then(response => {
          response.data.forEach(thePost => {
            state.posts = [...state.posts, thePost];
          });
          console.log(state.posts);
          return state;
        });
      break;
    default:
      return state;
  }

  return state;
}

索引（这里我正在创建我的商店并使用提供程序包装应用程序组件）：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { combineReducers, createStore } from "redux";
import { Provider } from "react-redux";

import postReducer from "./reducers/postsReducers";

const allReducers = combineReducers(
  {
    post: postReducer
  },

  window.devToolsExtension && window.devToolsExtension()
);

const store = createStore(allReducers);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

像这样在我的组件中映射它：

const mapStateToProps = state => ({
  posts: state.post.posts
});

如果你们需要其他任何东西，请告诉我，我有一个文件有点大，所以如果没有必要，我不想添加它，我现在正在用头撞墙几个小时。 提前致谢

===编辑===我也将我的动作映射到道具

const mapActionToProps = {
  onDeletePost: deletePost,
  onUpdatePost: updatePost,
  onGetPost: getPosts
};

我将我的行为定义为

export const ADD_POST = "posts:addPost";

    export function addPost(newTitle, newHours, newDate) {
      return {
        type: ADD_POST,
        payload: {
          id: new Date().toString(),
          title: newTitle,
          hours: newHours,
          date: new Date().toLocaleDateString()
        }
      };
    }

所以我已经在那里定义了动作，所以我不确定我需要一个 dispatchToAction 吗？ 我们说话时我正在查找它，并会尝试做一些事情，只是有点困惑。 ==编辑结束==

Answer 1

我认为从技术上讲，您的问题是您的减速器在提取完成之前返回（在所有axios ）。 但这不是你想要解决的问题。

首先，您的减速器中有太多事情要做。 您不应该在减速器中实施操作（获取数据）。 我想在你的组件中你正在构建一个看起来像{type: 'GET_POSTS'} ，然后......调度它？ 除非您似乎没有为您的组件提供调度。 所以行动永远不会到达商店。 我只能假设，因为您没有向我们展示您从哪里调用您的操作。

您应该将提取移动到它自己的异步（thunk）操作方法：

   function getPosts() {
     return dispatch => {
       axios
        .get("http://localhost:59511/api/post?date=31-12-2019")
        .then(response => {
          const posts = response.data
          dispatch({type: 'GET_POSTS', payload: posts})
        });
     }
   }

然后只需将帖子添加到您的减速器中的状态：

export default function postsReducer(state = initialState, { type, payload }) {
  switch (type) {
    case GET_POSTS:
     return { ...state, posts: payload }
    default:
      return state;
  }

然后您必须使用mapDispatchToProps将getPosts()函数连接到您的商店。 而且您还必须使用redux-thunk否则这根本不起作用。

您已经在 react-redux 上有了一个良好的开端，但是您的学习还存在一些差距。 您将需要研究异步操作和 redux thunk（或其他一些异步操作中间件）。 我建议查看所有 Redux 文档，主要是高级教程。

---

Answer 2

您的减速器正在改变状态，这会破坏应用程序。

另外，你这是在减速，这是绝不允许的AJAX调用。 所有异步逻辑都发生在reducer之外，reducer只查看它们的state和action参数来计算新状态。

这就是为什么 Redux 样式指南的前两个“基本”规则是Do Not Mutate State和Reducers Must Not Have Side Effects 。

我强烈建议您使用我们新的官方 Redux Toolkit 包。 它的configureStore()函数默认设置突变检测，它有像createSlice()这样的函数，可以让你编写更简单的createSlice()逻辑。

除此之外，我建议花更多时间阅读 Redux 文档，以了解您应该如何正确使用 Redux。

Answer 3

我改变了我的行动

import axios from "axios";
export const GET_POSTS = "posts:getPosts";

export function getPosts(theDate) {
  return dispatch => {
    axios
      .get("http://localhost:59511/api/post?date=31-12-2019")
      .then(response => {
        const posts = response.data;
        dispatch({ type: GET_POSTS, payload: posts });
      });
  };
}

减速器：

import { ADD_POST } from "../actions/addAction";
import { GET_POSTS } from "../actions/getAction";
import { DELETE_POST } from "../actions/deleteAction";
import { UPDATE_POST } from "../actions/updateAction";

const initialState = {
  posts: []
};

export default function postsReducer(state = initialState, { type, payload }) {
  switch (type) {
    case ADD_POST:
      state = state.slice();
      state.push(payload);
      break;
    case GET_POSTS:
      payload.forEach(element => {
        state.posts = [...state.posts, element];
      });

      break;
    default:
      return state;
  }

  return state;
}

在我想显示帖子的组件中：

const mapStateToProps = state => ({
  posts: state.post.posts
});

然后显示它：

 render() {
     return (
       <div className="contentWindow">
         {this.props.posts.map((post, i) => {
           return (
           #some displaying logic

存储创建随中间件而改变：

const store = createStore(
  allReducers,
  applyMiddleware(thunk)
);

在我将状态映射到道具的组件中，仍然没有更新我的道具。 当我使用 React 开发工具检查商店时，正在进行更改，但我的道具没有更新。

======编辑====== 我已将减速器代码更改为：

import { ADD_POST } from "../actions/addAction";
import { GET_POSTS } from "../actions/getAction";
import { DELETE_POST } from "../actions/deleteAction";
import { UPDATE_POST } from "../actions/updateAction";

const initialState = {
  posts: [123]
};

export default function postsReducer(state = initialState, { type, payload }) {
  switch (type) {
    case ADD_POST:
      state = state.slice();
      state.push(payload);
      break;
    case GET_POSTS:
      return { ...state, posts: payload };

    case DELETE_POST:
      state = state.filter(post => post.id !== payload.id);
      break;
    case UPDATE_POST:
      for (let index = 0; index < state.length; index++) {
        if (state[index].id === payload.theId) {
          state[index].id = payload.theId;
          state[index].date = payload.newDate;
          state[index].hours = payload.newHours;
          state[index].title = payload.newTitle;
        }
      }

      break;
    default:
      return state;
  }

  return state;
}

现在我有一个问题，每次 xD 时它都会改变它的初始状态，我很高兴我设法通过了前一个 btw 现在感觉如此强大：D。