时间戳

首页 > 解决方案 > Redux：如何调度唯一的对象键（唯一的 Id，而不是硬编码）

reactjs - Redux：如何调度唯一的对象键（唯一的 Id，而不是硬编码）

问题描述

我有一个名为 Redux 的操作makePost，它接收如下所示的数据：

{
  comment: false,
  comments_text: "",
  like: 0,
  name: "test"
}

然后，该操作会将数据推送到 Firebase 实时数据库。然后它调度另一个动作（称为post）以使用数据更新当前的 React 状态，并包含一个唯一的响应 id（id: response.key）。它看起来像这样：

export const makePost = (postObject) => {
    return (dispatch, getState) => {
        const uid = getState().userId;
        database
            .ref(`users/${uid}/posts`)
            .push(postObject)
            .then((response) => {
                dispatch(
                    post({
                        key: uid,
                        id: response.key,
                        ...postObject,
                    })
                )
            })
    }
}

post调度动作如下所示：

export const post = (post) => {
    return {
        type: "POST",
        payload: {
            key: post.key,
            handle: "PLACEHOLDER",
            posts: {
                postKey: {
                    name: post.name,
                    like: post.like,
                    comment: false,
                    comments_text: []
                }    
            }
        }
    }
}

我的问题是关于id: response.key. 当我调度时post，我希望postKey(object key) 是唯一的响应 id ( id: response.key)，而不是硬编码为postKey. 有没有办法动态地做到这一点？我试着把它写成， post.id但这不起作用。

作为参考，POSTreducer 如下所示：

const postsReducer = (state = [], action) => {
    switch (action.type){
        case POST:
            return [...state, action.payload];

这是我的 React 状态目前的样子，请注意之前的数据（对象 1）具有唯一的响应 ID，但最新的帖子（对象 2）被硬编码为postKey：

在此处输入图像描述

标签： reactjsreduxreact-redux

解决方案

您想在返回的对象上使用计算属性名称post。

对象初始值设定项语法还支持计算属性名称，允许您将表达式放在括号[]中，该表达式将被计算并用作属性名称。

let some_key = 'abc';
let obj = {
  [some_key]: 123
};
// obj = { abc: 123 }

因此，在您的情况下，请[post.id]用作此计算属性：

export const post = (post) => {
  return {
    type: "POST",
    payload: {
      key: post.key,
      handle: "PLACEHOLDER",
      posts: {
        // Assumes that `post.id` exists
        [post.id]: {
          name: post.name,
          like: post.like,
          comment: false,
          comments_text: [],
        },
      },
    },
  };
};

推荐阅读