Редуктор динамического ключа Redux

Question

Во-первых, я понимаю, что это изменение мутированного состояния; Я знаю стыд за меня. Иногда правильный способ кажется не самым умным, или я, по крайней мере, не знаю ничего лучше.

Позвольте мне объяснить, что я не буду вводить ключи в свое состояние без создания и обмена старым состоянием и новым состоянием для предопределенных элементов. Я просто хочу немного нажимать клавиши, и если я этого не сделаю, все равно все они будут очищены. Мое начальное состояние выглядит как

{graphSite: {site: "default", graphBrowser: { graphID: '', graphKey:'' }, browsable:[] }}; 

мой редуктор выглядит следующим образом ** с помощью Babel ES7 объекта распространения оператор

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
       return {...state} 
       } 

Так что это будет работать, но Redux инструменты Dev не показывает изменение состояния хотя просматриваемый массив доступное, возможно, это потому, что я пошел против зерна, хотя, если я продлить изменения:

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...state.graphSite.browsable} } 
           } 
          } 

Теперь просматриваемым показывает правильно в инструменте, но в идеале я этот s ame предмет.

Итак, вопрос заключается в том, как лучше всего управлять состоянием для динамических ключей, которые не находятся в исходном состоянии хранилища. Это работает, похоже, что я делаю что-то неправильно, потому что я манипулировал исходным состоянием.

Answer 1

Название путало меня в первую очередь. dynamic key injection Звучит слишком странно для меня: P.

В любом случае, вы действительно хотите добавить новую пару в свой browserble. Вы были:

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
      return {...state} 
      } 

Это неправильно (предполагается, что state приходит параметр формы редуктора), потому что вы непосредственно модификации state объекта.

Одним из принципов сокращения является то, что Changes are made with pure functions. (redux docs).

FTFY:

case BROWSER: { 
    const nextState = JSON.parse(JSON.stringify(state)); // deep copy your state 
    nextState.graphSite.browsable[action.id] = action.payload 
    return nextState 
} 

Это не самый код эффективна, JSON операции являются дорогостоящими. Это просто продемонстрировать принцип не мутирования объекта состояния напрямую.

Answer 2

Хорошо, я не мог видеть в контексте распространения объекта, как добавлять переменные ключи и не создавать начальные состояния хранилища. Это довольно просто после копирования состояния, после чего возвращает добавление таким образом; оба работали, это только сейчас не модифицирует исходное состояние. не

case BROWSER: { let browser = {...state} 
         browser.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser.graphSite.browsable} 
            } 
           } 
          } 

Нет ваши правые спасибо за деструктуризации вниз голосования прекрасно работает здесь

case BROWSER: { let {graphSite: {browsable: browser}} = state 
         browser[action.id] = action.payload 

         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser} 
            } 
           } 
          } 

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