redux - 如何存储和更新键/值对答案

【问题标题】：redux - how to store and update a key/value pairredux - 如何存储和更新键/值对
【发布时间】：2016-02-15 07:52:07
【问题描述】：

我正在使用带有 reactjs 的 redux。

我想存储简单的键/值对，但无法正确使用 reducer 语法。

在这种情况下，每个键/值对都将保持与外部系统的连接。

这是正确的做法吗？我刚开始使用 redux，所以有点神秘。

export default (state = {}, action) => {
  switch(action.type) {
    case 'addConnection':
      return    {
        connections: {
          ...state.connections, {
          action.compositeKey: action.connection
        }
      }

    default:
      return state
  }
}

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

这对我有用：

export default (state = {}, action) => {
  switch(action.type) {
    case 'addConnection':
      return {
        ...state,
        connections: {
          ...state.connections,
          [action.compositeKey]: action.connection
        }
      }
    default:
      return state
  }
}

来自文档：

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#correct-approach-copying-all-levels-of-nested-data

【讨论】：

【解决方案2】：

您只是在使用 {} 而不是 [] 时出现了一些错误，并且忘记使用 Object.assign。

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'addConnection':
      return Object.assign({}, state, {
        connections: [
           ...state.connections,
           {
             [actions.compositeKey]: action.connection
           }
        ]
      });
    default:
      return state;
  }
}

export default reducer;

看到它也以这种方式表达可能会有所帮助。它做同样的事情，但我认为它读起来更好一点

const reducer = (state = {}, {type, compositeKey, connection}) => {
  switch (type) {
    case 'addConnection':
      return Object.assign({}, state, {
        connections: state.connections.concat({
          [compositeKey]: connection
        })
      });
    default:
      return state;
  }
}

export default reducer;

或者如果你使用Immutable，类似这样的

import Immutable from 'immutable';

const reducer = (state = Immutable.Map(), {type, compositeKey, connection}) => {
  switch (type) {
    case 'addConnection':
      return state.set(
        'connections',
        state.get('connections').concat({
          [compositeKey]: connection
        })
      );
    default:
      return state;
  }
}

export default reducer;

【讨论】：

当我使用您提供的第二个或第三个选项时，它会在编译时显示“Uncaught ReferenceError: action is not defined”。
我忘记在action的解构中分配type。他们现在应该很好了:)

【解决方案3】：

这可能有效

const reducer = (state = {}, {type, compositeKey, connection}) => {
  switch (type) {
    case 'addConnection':
      var newData={};
      newData[compositeKey]=connection;
      return Object.assign({}, state, newData)
      });
    default:
      return state;
  }
}

export default reducer;

【讨论】：