更新嵌套的redux状态

时间:2017-01-06 22:51:45

标签: reactjs react-redux

我有一个reducer,它接收一个带有有效负载的动作,我需要用它来更新状态。问题是我需要在状态下更新的数据是嵌套数据。 我已在下面添加了我的减速机,并附上了一些评论以及我到目前为止尝试做的事情。

export default function(state=data, action){
  switch (action.type) {
    case 'UPDATE_CONTACT_INFO':
      let appointment = state[action.appointmentIndex]; // This is the appointment that needs to be updated 
      appointment.notification.contactInfo = action.payload; // this is the data that needs to be updated with the payload. I tried updating it like this but then not sure how to add it to the state. 
      return state; // Somehow need to update the state with the new state
      break;
    default:
    return state;
  }
}

下面是我的初始数据结构,我将其作为默认状态传递给reducer。

 data = [
        {
        date: 'Friday, January 6',
        time: '4:00 PM-5:00 PM',
        notification:
          {
            contactInfo: [
              {
                displayMethod:"Phone Call",
                method:"Phone",
                value:"3473686552"
              },
              {
                displayMethod:"Email",
                method:"Email",
                value:"memedoe@gmail.com"
              }
            ]
          }
      },
      {
        date: 'Saturday, January 7',
        time: '2:00 PM-6:00 PM',
        notification:
          {
            contactInfo: [
              {
                displayMethod:"Phone Call",
                method:"Phone",
                value:"2123686552"
              },
              {
                displayMethod:"Email",
                method:"Email",
                value:"johndoe@gmail.com"
              }
            ]
          }
      }
    ];

reducer数据中的action.payload与其中一个约会中的contactInfo数组相同。 [Object, Object]

3 个答案:

答案 0 :(得分:3)

使用redux,您永远不会更新状态。您必须使用更新的数据返回一个新的状态对象。

为了做到这一点,你需要使用Object.assign()或ES6扩展运算符{...}

我提供了两个链接: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

在这里阅读减速器: http://redux.js.org/docs/basics/Reducers.html

特别注意我们不要改变状态点。

答案 1 :(得分:1)

使用@Override public Request authenticate(Route route, Response response) throws IOException { Observable<Token> tokenObservable = tokenProvider.authWithRefreshToken(); return response.request().newBuilder() .header("Authorization", "Bearer " + "HERE_I_HAVE_TO_SET_THE_TOKEN") .build(); } 包可以解决此类问题。阅读here

这种情况可以这样解决:

react-addons-update

答案 2 :(得分:0)

您需要使用object.assign更改商店中的数据

const newstateobject = Object.assign({}, state[someIndex], {notification: Object.assign({}, state[someindex].notification, {contactInfo: action.payload})});

return Object.assign({}, state, {[someindex]: newstateobject);