javascript - 更新 redux 状态

标签 javascript ecmascript-6 redux

我试图让我的 redux reducers 在更新状态时更简单。例如,下面是一个 reducer :

const initialState = {
  emails: {
    id: {
      emailAddress: null,
      emailBody: null,
      emailSubject: null,
    },
  },
  calls: {},
};

function messaging(state = initialState, action) {
  switch (action.type) {
    case actionTypes.SET_EMAIL_ADDRESS:
      return {
        ...state,
        emails: {
          ...state.emails,
          [action.id]: {
            emailAddress: [action.emailAddress]
          },
        },
      };
    default:
      return state;
  }
}

export default messaging;

我试着写下面的 reducer,但是 webstorm 提示说这不是正确的表示法。我究竟做错了什么?此外,非常感谢任何有关如何以更清洁的方式更新状态的建议。谢谢!

case actionTypes.SET_EMAIL_ADDRESS:
  return {
    ...state,
    emails[action.id]: {
      ...state.emails[action.id],
      emailAddress: [action.emailAddress]
    },
  };

最佳答案

基于你的初始状态

并避免覆盖 emailBodyemailSubject 的现有值。

我会这样重写:

case actionTypes.SET_EMAIL_ADDRESS:
    const currentEmails = state.emails;
    const emailId = action.id;
    const emailAddress = action.emailAddress;

    const email = { ...currentEmails[emailId], emailAddress };
    const emails = { ...currentEmails, [emailId]: email };
    return { ...state, emails };

使用描述性名称总是值得的!

关于javascript - 更新 redux 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52683020/

相关文章:

reactjs - 在 Semantic-UI-React 中导入 CSS

javascript - redux 的一般用法

reactjs - 使用下拉列表自定义 ag-grid-filter 使用 react-redux 过滤特定列

javascript - 从 AngularJS 调用外部函数

javascript - 使用 JavaScript 删除 URL 的参数

javascript - 如何将自定义模板与 Angucomplete-alt 一起使用?

javascript - 简化 `import as`语法

javascript - 控制台警告 : component lists rendered with v-for should have explicit keys

javascript - 使用Ajax获取php函数调用的数组

javascript - 修正了一些语法