Question

我正在尝试使用Redux将键值对添加到我的商店。但是，我不确定如何做到这一点。简而言之，我正在从Firebase检索数据，我想将该数据添加到我的Redux存储中，但是我必须一次做一次。我想要的状态对象的结构是这样的：

reminders
 - reminder key 1
   - reminder title
   - reminder date 1
 - reminder key 2
   - reminder title
   - reminder date 1

以此类推。

但是我不知道如何在我的state.reminders对象中添加子对象

这是我的动作：

const fetchReminders = (uid) => async dispatch => {
    firebaseReminders.child(uid).orderByChild("date").on("value", snapshot => {

      snapshot.forEach(function(child) {
        console.log(child.val())
        dispatch({
          type: 'fetchReminders',
          value: child.val(),
          key: child.key
        });
      })

    });
};

因此这将为我从数据库中检索到的每个单个项目调度操作，然后在我的化简器中，我想使用action.key作为键将该项目添加到状态树中。目前我有

const remindersReducer = (state = initialState, action) => {

    switch(action.type) {

        case "fetchReminders":
             return Object.assign({}, state, {
                reminders: action.value
             });


        default: return state;
    }

};

这是不正确的。如何使用action.key的键和action.value的值将一个子节点添加到state.reminders对象中

Answer 1

let initialState = {
  reminders: {}
}

const remindersReducer = (state = initialState, action) => {
  switch(action.type) {
    case "fetchReminders":
      return Object.assign({}, state, {
        reminders: {
          ...state.reminders,
          [action.key]: action.value
        }
      });
    default: return state;
  }
};

let state1 = remindersReducer(initialState, {
    type: 'fetchReminders',
    key: 'reminderKey1',
    value: 'reminderValue1'
});
console.log(state1)

let state2 = remindersReducer(state1, {
    type: 'fetchReminders',
    key: 'reminderKey2',
    value: 'reminderValue2'
});
console.log(state2)

let state3 = remindersReducer(state2, {
    type: 'fetchReminders',
    key: 'reminderKey3',
    value: 'reminderValue3'
});
console.log(state3)

该代码段应该可以帮助您实现自己想做的事情。您可以使用以下格式将对象分配为action.key的键：

{
  [action.key]: action.value
}

它称为计算属性名称。

从ECMAScript 2015开始，对象初始化程序语法也支持计算的属性名称。这样您就可以表达在方括号[]中，将被计算并用作属性名称。 Source

将键值对添加到Redux存储

1 个答案: