javascript - Update nested object in Redux reducer - Stack Overflow

admin管理员组

文章数量:1302318

I have the following reducer:

import {
  // QuestionForm
  UPDATE_QUESTION_FORM,
  // FoodPreferenceList
  UPDATE_FOOD_PREFERENCE,
  UPDATE_NUMBER_OF_MEALS
} from '../actions/types';

const INITIAL_STATE = {
  setupComplete: false,
  error: '',
  loading: false,
  // QuestionForm
  questionForm: {
    gender: 'Female',
    age: '35',
    weight: '75',
    height: '175',
    activityLevel: '1.2',
    goal: '100',
    maintenanceCalories: '',
    goalCalories: '',
  },
  // FoodPreferenceList
  selectedFoodsArrays: [],
  numberOfMeals: '1'
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // QuestionForm
    case UPDATE_QUESTION_FORM:
      return { ...state, questionForm.[action.payload.prop]: action.payload.value };
    // FoodPreferenceList
    case UPDATE_FOOD_PREFERENCE:
      return { ...state, selectedFoodsArrays: action.payload };
    case UPDATE_NUMBER_OF_MEALS:
      return { ...state, numberOfMeals: action.payload };
    // DEFAULT
    default:
      return state;
  }
};

I am having a bit of trouble referencing one of the objects stored in my state. The problem is with the line:

case UPDATE_QUESTION_FORM:
  return { ...state, questionForm.[action.payload.prop]: action.payload.value };

I get the following ESLint Error. I am trying to update an element of the questionForm entry with a value. The element updated in questionForm is decided by an argument. The format seems to be incorrect and Google Search has not helped out.

Example

questionForm.[gender]: 'Male'

• This will update the gender key of questionForm with the value 'Male'.

I have the following reducer:

import {
  // QuestionForm
  UPDATE_QUESTION_FORM,
  // FoodPreferenceList
  UPDATE_FOOD_PREFERENCE,
  UPDATE_NUMBER_OF_MEALS
} from '../actions/types';

const INITIAL_STATE = {
  setupComplete: false,
  error: '',
  loading: false,
  // QuestionForm
  questionForm: {
    gender: 'Female',
    age: '35',
    weight: '75',
    height: '175',
    activityLevel: '1.2',
    goal: '100',
    maintenanceCalories: '',
    goalCalories: '',
  },
  // FoodPreferenceList
  selectedFoodsArrays: [],
  numberOfMeals: '1'
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // QuestionForm
    case UPDATE_QUESTION_FORM:
      return { ...state, questionForm.[action.payload.prop]: action.payload.value };
    // FoodPreferenceList
    case UPDATE_FOOD_PREFERENCE:
      return { ...state, selectedFoodsArrays: action.payload };
    case UPDATE_NUMBER_OF_MEALS:
      return { ...state, numberOfMeals: action.payload };
    // DEFAULT
    default:
      return state;
  }
};

I am having a bit of trouble referencing one of the objects stored in my state. The problem is with the line:

case UPDATE_QUESTION_FORM:
  return { ...state, questionForm.[action.payload.prop]: action.payload.value };

I get the following ESLint Error. I am trying to update an element of the questionForm entry with a value. The element updated in questionForm is decided by an argument. The format seems to be incorrect and Google Search has not helped out.

Example

questionForm.[gender]: 'Male'

• This will update the gender key of questionForm with the value 'Male'.

• javascript
• reactjs
• react-native
• ecmascript-6
• redux

Share Follow edited Dec 20, 2017 at 20:29 Andrew Li 58k1414 gold badges134134 silver badges148148 bronze badges asked Dec 20, 2017 at 18:47 oisin097oisin097 9711 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

What you would do is add another level of nesting:

case UPDATE_QUESTION_FORM:
  return { 
    ...state, 
    questionForm: {
      ...state.questionForm,
      [action.payload.prop]: action.payload.value 
    }
  };

This uses spread syntax along with puted property names (from ES6) to use an expression as an object key.

本文标签： javascriptUpdate nested object in Redux reducerStack Overflow