javascript - 查询 reducer 内部？还原

Question

我如何在 reducer 内部编写它来改变状态？

doc = {
  id:"zf123ada123ad",
  name:"examp",
  subdoc:{
    name:"subdoc examp",
    subsubdoc:[{
               id:"zcgsdf123zaar21",
               subsubsubdoc:[{
                             id:"af2317bh123",
                             value: "heyhey"   //this value I want to update
                            }]
              }]
}
}

假设我有一个看起来像这样的 reducer action.payload 看起来像这样{theInputId1: "someId",theInputId2: "另一个Id",输入值:“某个值”}

export function updateSubSubSubDoc(state = {}, action){
  switch(action.type){
    case 'UPDATE_THE_SUBSUBSUB':
      return {
               state.doc.subdoc.subsubdoc.find(x => x.id == 
          theInputId1).subsubsubdoc.find(x => x.id == theInputId2).value = theInputValue  // just example code for you to understand where i'm going.
             }

    default:
      return state
  }
}

我想要做的就是更新当前状态下的一个 subsubsub 文档

Answer 1

使用 ES6，这是您可以做到这一点的一种方法:

const initialState = { doc: { subdoc: { subsubdoc: {} } } };
export function doc(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_THE_SUBSUBSUB':
      const subsubdocIdx = state.doc.subdoc.
        subsubdoc.find(s => s.id == action.theInputId1);
      const subsubdoc = state.doc.subdoc.subsubdoc[subsubdocIdx];
      const subsubsubdocIdx = state.doc.subdoc.
        subsubdoc[subsubdocIdx].
        subsubsubdoc.find(s => s.id == action.theInputId2);
      const subsubsubdoc = state.doc.subdoc.
        subsubdoc[subsubdocIdx].
        subsubsubdoc[subsubsubdocIdx];
      return {
        ...state,
        doc: {
          ...state.doc,
          subdoc: {
            ...state.doc.subdoc,
            subsubdoc: [
              ...state.doc.subdoc.subsubdoc.slice(0, subsubdocIdx),
              {
                ...subsubdoc,
                subsubsubdoc: [
                  ...subsubdoc.slice(0, subsubsubdocIdx),
                  {
                    ...subsubsubdoc,
                    value: action.theInputValue,
                  },
                  ...subsubdoc.subsubsubdoc.slice(subsubsubdocIdx + 1, subsubdoc.subsubsubdoc.length - 1),
                ],
              },
              ...state.doc.subdoc.subsubdoc.slice(subsubdocIdx + 1, state.doc.subdoc.subsubdoc.length - 1),
            ]
          }
        }
      }
    default:
      return state;
  }
}

(我还没有测试过这段代码。)

这与您的示例中的嵌套级别相同，但您可能会考虑使用诸如 combineReducers 之类的东西来使其更易于管理。这还假设您在此过程中有其他创建文档链的操作，并且您知道这些文档存在。

以下是如何使用 combineReducers 实现此目的的示例:

function doc(state = {}, action) {
}

function subdoc(state = {}, action) {
}

function subsubdoc(state = [], action) {
}

function subsubsubdoc(state = [], action) {
  switch (action.type) {
    case 'UPDATE_THE_SUBSUBSUB':
      const idx = state.find(s => s.id == action.theInputId2);
      return [
        ...state.slice(0, idx),
        {
          ...state[idx],
          value: action.theInputValue,
        },
        ...state.slice(idx + 1),
      ];
    default:
      return state;
  }
}

export default combineReducers({
  doc,
  subdoc,
  subsubdoc,
  subsubsubdoc,
});

在此示例中，您不需要 action.theInputId1，但您需要在从 subsubdoc 到 subsubsubdoc 的数据中存储一些引用，以便在渲染时，您可以将它重新拼凑起来。与所有其他层相同。