React redux - updating nested array in state

Question

I'm trying some app in react redux and i have a problem with updating (push, remove, update) the nested array in state.

I have some object called service like this:

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'xxx'},
       { id: 2, sName: 'zzz'}, 
    ]
}

Whatever I did (in case of adding property to collection) in the reducer with the properties collection generate problem that all properties got same values as the last I had recently added -> Added property object is in service properties collection but the action replace all values in all properties in this collection. My reducer:

export function service(state = {}, action) {
        switch (action.type) {
            case 'ADD_NEW_PROPERTY':
                console.log(action.property) // correct new property
                const service = {
                    ...state, properties: [
                        ...state.properties, action.property
                    ]
                }
                console.log(service); // new property is pushed in collection but all properties get same values
                return service

            default:
                return state;
        }
    }

I have tried some solution with immutability-helper library and it generate the same problem:

export function service(state = {}, action) {
    case 'ADD_NEW_PROPERTY':

                return update(state, {properties: {$push: [action.property]}})

            default:
                return state;
        }

For example when I add new property { id: 1, sName: 'NEW'} to example above I will get this state:

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'NEW'},
       { id: 1, sName: 'NEW'}, 
       { id: 1, sName: 'NEW'}
    ]
}

Can someone help? :)

On the first look, the reducer looks right. Could you provide an exemple a component using it and his connection to Redux ? — Okazari
– Okazari, Commented Nov 23, 2017 at 15:44
connection to redux in my container is working. Somewhere I call this: dispatch(addNewProperty(property)) and the action: export function addNewProperty(property) { return { type: 'ADD_NEW_PROPERTY', property } } I think this working because the property data in reducer are good - when I do console.log(action.property) — chobotek
– chobotek, Commented Nov 23, 2017 at 15:58

André Werlang · Accepted Answer · 2017-11-23 16:26:07Z

2

Make a copy of action.property as well. Whatever is dispatching this action, it could be reusing the same object.

export function service(state = {}, action) {
  switch (action.type) {
    case 'ADD_NEW_PROPERTY':
      console.log(action.property) // correct new property
      const service = {
        ...state,
        properties: [
          ...state.properties, 
          { ...action.property }
        ]
      }
      console.log(service); // new property is pushed in collection but all properties get same values
      return service

    default:
      return state;
  }
}

edited Nov 23, 2017 at 16:26

answered Nov 23, 2017 at 15:54

André Werlang

5,9841 gold badge37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

soupette · Accepted Answer · 2017-11-23 17:15:08Z

1

I'd recommend you to use Immutable data https://facebook.github.io/immutable-js/docs/#/List

import { fromJS, List } from 'immutable';

const initialState = fromJS({
  propeties: List([{ id: 1, sName: 'xyz' }]
}

function reducer(state = initialState, action) {
  case ADD_NEW_PROPERTY:
    return state
      .update('properties', list => list.push(action.property));
 // ...
}

answered Nov 23, 2017 at 17:15

soupette

1,28011 silver badges11 bronze badges

1 Comment

André Werlang Over a year ago

Before considering a library, just learn what the language has to offer. You'll be impressed!

Berry M. · Accepted Answer · 2017-11-23 15:38:41Z

0

Your service reducer should probably look somewhat like this:

// Copy the state, because we're not allowed to overwrite the original argument
const service = { ...state }; 
service.properties.append(action.property)
return service

answered Nov 23, 2017 at 15:38

Berry M.

4891 gold badge4 silver badges17 bronze badges

Comments

mxmln · Accepted Answer · 2017-11-23 15:46:58Z

0

You should always copy the state before returning it.

  export default function(state = {}, action) {
  switch(action.type) {
    case 'GET_DATA_RECEIVE_COMPLETE': {
      const data  = action.firebaseData;
      const newState = Object.assign({}, state, {
        data
      });

      return newState
    }
    default:
      return state;

  }
}

answered Nov 23, 2017 at 15:46

mxmln

211 bronze badge

Collectives™ on Stack Overflow

React redux - updating nested array in state

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related