Question

我的减速器中有以下代码。除了comment.parentPostId为空时，它工作正常。我想知道如何仅在[comment.parentPostId]不为null的情况下运行comment.parentPostId部分。

作为一种解决方案，我可以定义两个减速器，每个条件一个。但是，这似乎不是一个可靠的方法。有什么建议吗？

 case POST_COMMENT_SUCCESS:
     const comment = action.payload.normalizedData;
     return {
         ...state,
         loading: false,
         editing: false,
         alignPerspectives: {
             ...state.alignPerspectives,
             [comment.submissionId]: {
                 ...state.alignPerspectives[comment.submissionId],
                 discussionPosts: [...state.alignPerspectives[comment.submissionId].discussionPosts, comment.id]
             }
         },
         discussionPosts: {
             ...state.discussionPosts,
             [comment.id]: comment,
             [comment.parentPostId]: {
                 ...state.discussionPosts[comment.parentPostId],
                 childPosts: [...state.discussionPosts[comment.parentPostId].childPosts, comment.id]
             }

         }
     };

Answer 1

您总是可以拆分您的reducer并将过程的某些部分委托给另一个reducer，如此处https://redux.js.org/recipes/structuring-reducers/splitting-reducer-logic

OR

您可以使用三元运算符检查其是否为有效值，并相应地返回状态对象

case POST_COMMENT_SUCCESS:
    const comment = action.payload.normalizedData;

    return comment.parentPostId ? {
        ...state,
        loading: false,
        editing: false,
        alignPerspectives: {
            ...state.alignPerspectives,
            [comment.submissionId]: {
                ...state.alignPerspectives[comment.submissionId],
                discussionPosts: [...state.alignPerspectives[comment.submissionId].discussionPosts, comment.id]
            }
        },
        discussionPosts: {
            ...state.discussionPosts,
            [comment.id]: comment,
            [comment.parentPostId]: {
                ...state.discussionPosts[comment.parentPostId],
                childPosts: [...state.discussionPosts[comment.parentPostId].childPosts, comment.id]
            }

        }
    } : {
        ...state,
        loading: false,
        editing: false,
        alignPerspectives: {
            ...state.alignPerspectives,
            [comment.submissionId]: {
                ...state.alignPerspectives[comment.submissionId],
                discussionPosts: [...state.alignPerspectives[comment.submissionId].discussionPosts, comment.id]
            }
        },
        discussionPosts: {
            ...state.discussionPosts,
            [comment.id]: comment,
        }
    }

希望这会有所帮助！

仅当值不为null时，才更新redux存储的一部分

1 个答案: