Question

我很难弄清楚这一点。

我在我的应用程序中使用redux并希望从switch语句中返回一个全新的对象。假设我们有一个初始状态，然后当一个componentWillMount我们发出一个ajax请求，我们想用这些新值覆盖初始状态。来自ajax请求的对象的键是SAME作为初始状态对象。但是，价值观明显改变了。返回新javascript对象的最有效和最简洁的方法是什么？

const INITIAL_STATE = {
  name: "",
  email: "",
  phoneNumber: "",
  uid: "",
  photoURL: "",
  address: {
    city: "",
    country: "",
    street: "",
    details: ""
  },
  pastOffers: [],
  memberSince: "",
  gender: "",
  birthday: "",
  description: "",
  worker: false
};

export default (state = INITIAL_STATE, action) => {

  switch (action.type) {
    case FETCH_USER_SUCCESS:
      return { ...state, HOW DO I INSERT ACTION.PAYLOAD HERE };

    default:
      return state;
  }
};

我正在考虑使用lodash并执行_.each（），然后使用（prop，value）将对象传递给reducer，然后执行：

return { ...state, [action.payload.prop]: action.payload.value }

但这看起来有点太多了。有没有更简单的方法？

Answer 1

将两个对象复制到一个新对象中：

{...state,...actions.payload}

Object.assign({},state,actions.payload);

或使用继承可能：

Object.create(state,actions.payload);

Answer 2

使用用户服务查看此示例：

const initialState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null,
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "FETCH_USERS_PENDING":
            {
                return { ...state,
                    fetching: true
                }
                break;
            }
        case "FETCH_USERS_REJECTED":
            {
                return { ...state,
                    fetching: false,
                    error: action.payload
                }
                break;
            }
        case "FETCH_USERS_FULFILLED":
            {
                return {
                    ...state,
                    fetching: false,
                    fetched: true,
                    users: action.payload,
                }
                break;
            }
    }
    return state
}
store.dispatch({
    type: "FETCH_USERS",
    payload: /* user service */
})

Answer 3

JavaScript在操作对象时会尝试变得聪明。

如果您有CONST，并且每次都想要返回一个新实例。然后我将对象分配为一个你永远不会操纵的字符串。当你想要这个“对象”的新实例时，你可以在那里创建对象。

const INITIAL_STATE = '{ "name": "", "email": "", "phoneNumber" : "", "uid" : "", "photoURL" : "", "address": { "city": "", "country": "", "street": "", "details" : "" }, "pastOffers" : [], "memberSince": "", "gender": "", "birthday": "", "description": "","worker": false };

现在您拥有一个包含已定义架构的字符串对象。返回新实例就像

一样简单

function getNewInstance() {
  var newInstance = JSON.parse(INITIAL_STATE);
  newInstance["name"] = "Joe Bloggs";
  newInstance["email"] = "Joe@bloggs";
  return newInstance;
}

或者你只需在那里声明对象，然后返回预先填充的新实例。

function getNewInstance(name, email, phoneNumber) {
    return {
      "name": name,
      "email": email,
      "phoneNumber": phoneNumber,
      "uid": "",
      "photoURL": "",
      "address": {
        "city": "",
        "country": "",
        "street": "",
        "details": ""
      },
      "pastOffers": [],
      "memberSince": "",
      "gender": "",
      "birthday": "",
      "description": "",
      "worker": false
    };
}

如何返回具有相同键但具有不同值的NEW对象

3 个答案: