Reactjs 当操作完成时，如何告知React Redux视图？

对不起，这里的主题可能不清楚

我的“AddReview”视图触发启动操作。 减速器通过将

isLoading

设置为true来响应启动操作，从而使视图显示其正在加载。 当我的操作完成时，成功和失败在减速器中将

isLoading

设置为false，活动指示器消失

在发生故障的情况下，我可以向减速器写入错误，当减速器中存在错误时，我可以在视图中呈现错误，并且我可以在下次启动操作时清除减速器中的错误

因此，我可以通知我对错误的看法，但如何通知我对成功的看法，并用审查列表替换对的审查

我能想到的所有解决方案都显得笨拙和错误：

• reducer中的

  newReview

  属性，如果

  newReview

  为truthy，则我的视图将呈现审阅列表，然后触发“清除新审阅操作”
• 以某种方式存储

  attemptedReview

  并添加一个

  showList

  逻辑，该逻辑需要检查当前产品的评论中是否存在

  attemptedReview

  ？其中，

  showList

  逻辑也更简单地包括用户选择显示列表还是显示表单的状态

---

如果您使用React 16.8挂钩，应该是一个不错的选择

=组合的componentDidMount、componentDidUpdate和componentWillUnmount

示例

import React, { useEffect } from 'react';
import { Provider } from 'react-redux';

import AppInitActions from './store/actions/awesomeactions';

function App() {
  useEffect(() => store.dispatch(AppInitActions.handleCoolAction()), []);
  return (
    <Provider store={store}>
   <!....<Myactions />....>
    </Provider>
  );
}

export default App;

import React，{useffect}来自“React”；
从'react redux'导入{Provider}；
从“/store/actions/awesomeactions”导入AppInitActions；
函数App（）{
useffect（（）=>store.dispatch（AppInitActions.handleCoolAction（）），[]）；
返回(
....>
);
}
导出默认应用程序；

我通过创建一个新的重置redux存储的

resetAction

和一个名为

issucess

的reducer状态新变量来模拟这种行为

这样，当您的初始操作成功时，您可以将

issucces

设置为true，然后捕获相应组件上的

issucces

，并处理所需的逻辑（重定向或状态更改），最后调用

resetAction

，以便redux存储恢复正常

---

我猜它有点笨重，也不优雅，但它可以工作。

对于给定的状态结构：

{
 "PRODUCT-1": {
   id: "PRODUCT-1",
   reviews: [],
 }
}

1。发布评论后发送

addReviewSuccess

postSomething('SOME_API_ENDPOINT', { id, newReview })
  .then(() => addReviewSuccess(id, newReview));

addReviewSuccess = (id, newReview) => {
  const payload = {
    id,
    newReview,
  };

  dispatch(addReviewSuccess(payload));
}

2。在Reducer中收听

ADD\u REVIEW\u SUCCESS

系统可以监听

ADD\u REVIEW\u SUCCESS

操作，将该

评论添加到该特定
产品的
评论列表中

// Action
{
  type: 'ADD_REVIEW_SUCCESS',
  payload: {
    id: "PRODUCT-1",
    newReview: {
      message: 'some review',
    }
  }
}

// Reducer
case 'ADD_REVIEW_SUCCESS':
  const newReview = payload.newReview;
  const product = state.products[payload.id];

  return {
    ...state.products,
    [product.id]: {
      ...state.products[product.id],
      reviews: [
        ...state.products[product.id].reviews,
        newReview
      ]
    }
  };

3。每隔一次重新渲染组件
ADD\u REVIEW\u SUCCESS

然后，每次产品有新评论时，组件都将重新呈现。
注意
键
道具，因为这对React的操作非常有帮助

//产品
mapStateToProps（州）{
const{products}=this.state；
返回{
产品，
}
}
const ProductList=（产品）=>(
{Object.values（products）.map（（product）=>(
)}
);
//评论
常量评论=（评论）=>(
{reviews.map（（review）=>(
{review.message}
)}
)
您可以向减速器中的数据添加唯一标识符。

这样，即使结果不变，在触发操作时视图也将始终更新

时间戳非常好，因为您可以将该值用于其他事情（例如“上次更新的x时间之前”），但您需要小心时间源，否则可能会出现一些奇怪的错误。

基本上，您需要一个单调递增的值，因此对于时间戳，这意味着使用
performance.now（）


您还可以简单地在第一个操作中使用从0开始的整数，并在每个新操作中递增该整数

当然，不利的一面是，如果您在其他地方显示此数据，即使不需要，它也会在每次重新渲染。这意味着您需要在此组件中实现
shouldComponentUpdate
，以防止出现这种情况。
这并不能回答问题。如果只是更新审阅列表的问题，那么这将起作用，因为因为“更新列表”实际上只是“呈现当前列表”。然而，我还需要隐藏审阅表单组件，它并没有真正绑定到列表。
// Product
mapStateToProps(state) {
  const { products } = this.state;

  return {
    products,
  }
}

const ProductList = (products) => (
  <Products>
  { Object.values(products).map((product) => (
    <Product key={product.id}>
      <Reviews reviews={product.reviews} />
    </Products>
  )}
);

// Reviews
const Reviews = (reviews) => (
  { reviews.map((review) => (
    <Review>{review.message}</Review>
  )}
)