Question

我有一个reducer案例，这个案例应该添加一个注释，并用新注释更新UI

您几乎添加了一条注释，一旦您添加了注释，该注释就会显示在其余注释的下面，由于某种原因，逻辑不会返回新状态。

这可能是什么原因？老实说，我不确定自己在做什么，而在减速器规范化器状态更新方面，我还是一个新手。

只有刷新后，我才能看到新评论。

<script>
    $('.js-ajax').select2({
        ajax: {
            url: '/product/api/elasticsearch',
            dataType: 'json',
            width: 'resolve', // need to override the changed default
            minimumResultsForSearch: -1,
            dropdownCssClass: 'select2-hidden',

            success: function (data) {
                var returnedData = data;
                // clear table
                $('#products tbody').empty();

                for(let i = 0; i < returnedData.results.length; i++){
                    $("#products").find('tbody')
                        .append($('<tr>')
                            .append($('<td>')
                                .text(returnedData.results[i].id)
                            )

                            .append($('<td class="columt">')
                                .text(returnedData.results[i].text)
                            )

                            .mouseover(returnedData.results[1].text)

                            .append($('<td class="columnp">')
                                .text(returnedData.results[i].sku)
                            )
                            .append($('<td class="colum7">')
                                .text(returnedData.results[i].vendor)
                            )
                        );
                }
            }
        }
    });
</script>

https://www.docker.com/blog/user-guided-caching-in-docker-for-mac/

Answer 1

不确定，因为我看不到您的byId对象的形状，但是我认为问题可能出在这里：

case POST_COMMENT_SUCCESS:
  return {
    ...state, // here you are spreading the whole state object
    // and here you are spreading state.comments at the same level, NOT nested:
    ...state.comments,
    // Again same thing here, not nested:
    [action.data.id]: action.data,
  }

相反，您应该这样做，更多信息in the Redux docs：

case POST_COMMENT_SUCCESS:
  return {
    ...state,
    comments: {
      ...state.comments,
      [action.data.id]: action.data
    }
  }

或者，您可以使用Immer来简化减速器，我正在使用它并且很喜欢它。感觉有点怪异，因为您可以使用突变方法来修改其draft，但是如果您想拥有更简单的减速器，那就太好了。您使用Immer编写的代码要简单得多：

case POST_COMMENT_SUCCESS:
  draft.comments[action.data.id]: action.data,
  return;

使用Immer，您只需要修改（或变异）draft对象，如果您要分配的值与您所拥有的值不同，它将为您生成一个新对象，否则将返回状态。

希望有帮助。

Redux Reducer不会将更新后的状态返回给UI

1 个答案: