2016-06-20 7 views
18

Я застрял с этим битом, и я не могу прогрессировать - думаю, решение прост, но я не могу понять. Я пытаюсь добавить запись в редукторе, так что данные в ин будет выглядеть это:Redux - Как добавить запись в массив в редукторе

state = { 
    entryId: { 
    entryName: ["something", "something2", "something3" /* and so on... */] 
    } 
}; 

До сих пор это ближайший я получаю, но, вместо того, чтобы добавлять новые уникальные записи, он заменяет одну который уже сохранен. Также мне нужно, чтобы иметь возможность добавить этот пункт в пустом состоянии, в котором EntryID, entryName еще не существует, чтобы избежать ошибки:

switch(type) { 
    case ADD_ENTRY: 
    return { 
     ...state, 
     [entryId]: { 
     ...state[entryId], 
     [entryName]: { 
      [uniqueEntry]: true 
     } 
     } 
    }; 
} 

Любая идея, что я делаю не так?

+0

Можете ли вы написать больше контекста на примере? Например, вы можете указать _shape_ действия, которое вы обрабатываете с помощью встроенного редуктора? –

+0

Я отправляю что-то вроде этого: addEntry ({entryId, entryName, uniqueEntryid}) – eloleon

+0

Попробуйте следующее: [link] (https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage -2% 2Cstage-3 & код = Const% 20state% 20% 3D% 20% 7B% 0D% 0A% 20% 20entryId% 3A% 20% 7B% 0D% 0A% 20% 20% 20% 20entryName% 3A% 20% 5B % 22something% 22% 2C% 20% 22something2% 22% 2C% 20% 22something3% 22% 5D% 0D% 0A% 20% 20% 7D% 0D% 0A% 7D% 3B% 0D% 0A% 0D% 0Aconst% 20newState % 20% 3D% 20% 7B% 0D% 0A% 20% 20% 5B% 22entryId% 22% 5D% 3A% 7B% 0D% 0A% 20% 20% 20% 20% 5B% 22entryName% 22% 5D% 3A % 20% 5B ... состояние% 5B% 22entryId% 22% 5D% 5B% 22entryName% 22% 5D% 2C% 22something4% 22% 5D% 0D% 0A% 20% 20% 7D% 0D% 0A% 7D% 3B % 0D% 0A% 0D% 0Aconsole.log (newState)% 3B & experimental = true & loose = false & spec = false) – jzm

ответ

22

Если вы пытаетесь добавить элемент в конец массива entryName вы должны делать:

return { 
    ...state, 
    [entryId]: { 
    ...state[entryId], 
    [entryName]: [ 
     ...state[entryId][entryName], 
     uniqueEntry 
    ] 
    } 
}; 

ES6 распространение с массивами работает следующим образом:

const array1 = [1, 2, 3]; 
const array2 = [4, 5, 6]; 
const eight = 8; 

const newArray = ['stuff', ...array1, 'things', ...array2, ...[7, eight], 9]; 
console.log(newArray); // ["stuff", 1, 2, 3, "things", 4, 5, 6, 7, 8, 9] 

Проверить out this gist, который имеет пример чего-то очень похожего на то, что вы делаете.

Я нашел этот набор примеров чрезвычайно полезным. Много интересных вещей здесь:

https://github.com/sebmarkbage/ecmascript-rest-spread

Update:

Если entryName инициализируется undefined, как вы говорите в свой комментарий, вы можете сделать это:

return { 
    ...state, 
    [entryId]: { 
    ...state[entryId], 
    [entryName]: [ 
     ...state[entryId][entryName] || [], 
     uniqueEntry 
    ] 
    } 
}; 

Я думаю, это довольно большой пример того, насколько болезненно он может работать с React/redux, используя сильно вложенную структуру данных. FWIW, мне было рекомендовано много раз сгладить ваше состояние как можно больше.

+0

Спасибо dannyid! Я пробовал одно и то же, и проблема в том, что начальное состояние - пустой объект, поэтому эта строка «... state [entryId] [entryName]» забросит ошибку – eloleon

+0

Ahh, это важная информация! Можете ли вы обновить свой вопрос, и я обновлю свой ответ? – jaybee

+0

Теперь я обновлю вопрос.BTW Я работал над своей проблемой почти точно таким же образом, как и вы "|| []" – eloleon