Javascript 使用Redux迭代JSON（我如何为此组织我的还原程序？）

我有一个JSON对象，我想逐个对象加载它。也就是说，用户单击一个按钮，然后id为1的对象将显示给他，如果用户再次单击按钮，将显示id为2的对象，依此类推。现在，我制作了一个reducer，它只返回（整个）JSON，如下所示：

export default function() {
  return [
    {
      id: 1,
      attribute: "some values"
    },
    {
      id: 2,
      attribute: "some other values"
    },
    {
      id: 3,
      attribute: "some more values"
    }
  ]
}

现在我想编写一个函数，它总是从这个JSON中获取下一个对象，并在我的React应用程序中显示其结果。我不知道如何在Redux中实现这一点。我需要跟踪身份证吗？如果是，如何和在哪里

---

我正在考虑一个名为activeObject reducer的reducer，它总是包含当前对象及其所有属性。但是，我不知道如何将一个对象从我的JSON reducer传递到另一个reducer——原则上这是正确的方法吗，或者你会推荐其他可能完全不同的方法吗

至少有几种方法可以做到这一点

我可能只是将状态键从数组扩展到对象：

{
  active: {}
  all: []
}

现在，您可以对

all

重新使用现有的reducer，并为

active

添加行为：

const reducer = (state = {}, action) => {
  switch (action.type) {
    case UPDATE_LIST: // whatever action is currently updating your list
      const nextAll = originalListReducer(state.all, action);
      return { 
        active: nextAll[0], 
        all: nextAll
      };
    case NEXT_ACTIVE_ITEM:
      const {active, all} = state;
      const activeIndex = all.indexOf(active);
      const nextIndex = (activeIndex + 1) % all.length;
      return {
        ...state, 
        active: all[nextIndex] 
      };
    default:
      return state;
  }
};

您还可以使

处于活动状态

由您调用的自己的reducer管理，类似于上面的

originalListReducer

，以及。比如：

const reducer = (state = {}, action) => {
  switch (action.type) {
    case UPDATE_LIST: // whatever action is currently updating your list
      const {all, active} = state;
      const nextAll = originalListReducer(all, action);
      const nextActive = nextActiveReducer(active, action, nextAll)
      return {
        all: nextAll,
        active: nextActive
      };
    case NEXT_ACTIVE_ITEM:
      const {all, active} = state;
      return {
        ...state,
        active: nextActiveReducer(active, action, all)
      }
    default:
      return state;
  }
};

const nextActiveReducer = (active, action, all) => {
  switch (action.type) {
    case UPDATE_LIST:
      return all[0];
    case NEXT_ACTIVE_ITEM:
      return (all.indexOf(active) + 1) % all.length;
    default:
      return active;
  }
};

另一种方法是将逻辑推到动作创建者中。在这种情况下，您可以使用查看当前状态并分派适当的“下一步”活动对象操作：

const nextActiveObject = () => {
  return (dispatch, getState) => {
    const {active, all} = getState();
    const activeIndex = all.indexOf(active);
    const nextIndex = (activeIndex + 1) % all.length;
    const nextActive = all[nextIndex];
    dispatch({ type: UPDATE_ACTIVE, active: nextActive });
  }
};

现在，您的还原程序变成了

活动的
和
所有的
的“哑”更新程序，如下所示：

const rootReducer = combineReducer({
  all: allReducer,
  active: activeReducer
});

const allReducer = (state = [], action) => {
  switch (action.type) {
    case UPDATE_LIST:
      return action.list;
    default:
      return state;
  }
};

const activeReducer = (state = null, action) => {
  switch (action.type) {
    case UPDATE_ACTIVE:
      return action.nextActive;
    default:
      return state;
  }
};

你想走哪条路是正确的。
至少有几种方法可以做到这一点

我可能只是将状态键从数组扩展到对象：

{
  active: {}
  all: []
}

现在，您可以对
all
重新使用现有的reducer，并为
active
添加行为：

const reducer = (state = {}, action) => {
  switch (action.type) {
    case UPDATE_LIST: // whatever action is currently updating your list
      const nextAll = originalListReducer(state.all, action);
      return { 
        active: nextAll[0], 
        all: nextAll
      };
    case NEXT_ACTIVE_ITEM:
      const {active, all} = state;
      const activeIndex = all.indexOf(active);
      const nextIndex = (activeIndex + 1) % all.length;
      return {
        ...state, 
        active: all[nextIndex] 
      };
    default:
      return state;
  }
};

您还可以使
处于活动状态
由您调用的自己的reducer管理，类似于上面的
originalListReducer
，以及。比如：

const reducer = (state = {}, action) => {
  switch (action.type) {
    case UPDATE_LIST: // whatever action is currently updating your list
      const {all, active} = state;
      const nextAll = originalListReducer(all, action);
      const nextActive = nextActiveReducer(active, action, nextAll)
      return {
        all: nextAll,
        active: nextActive
      };
    case NEXT_ACTIVE_ITEM:
      const {all, active} = state;
      return {
        ...state,
        active: nextActiveReducer(active, action, all)
      }
    default:
      return state;
  }
};

const nextActiveReducer = (active, action, all) => {
  switch (action.type) {
    case UPDATE_LIST:
      return all[0];
    case NEXT_ACTIVE_ITEM:
      return (all.indexOf(active) + 1) % all.length;
    default:
      return active;
  }
};

另一种方法是将逻辑推到动作创建者中。在这种情况下，您可以使用查看当前状态并分派适当的“下一步”活动对象操作：

const nextActiveObject = () => {
  return (dispatch, getState) => {
    const {active, all} = getState();
    const activeIndex = all.indexOf(active);
    const nextIndex = (activeIndex + 1) % all.length;
    const nextActive = all[nextIndex];
    dispatch({ type: UPDATE_ACTIVE, active: nextActive });
  }
};

现在，还原程序变成
active
和
all的“哑巴”更新程序，如下所示：

const rootReducer = combineReducer({
  all: allReducer,
  active: activeReducer
});

const allReducer = (state = [], action) => {
  switch (action.type) {
    case UPDATE_LIST:
      return action.list;
    default:
      return state;
  }
};

const activeReducer = (state = null, action) => {
  switch (action.type) {
    case UPDATE_ACTIVE:
      return action.nextActive;
    default:
      return state;
  }
};

您想走哪条路。
当您到达列表中的最后一项时，是否希望它循环回到开始并再次返回第一个元素？或者，一旦它到达终点，应用程序就停止显示数据了？这更需要理解如何使redux正常工作，因此我对任何一种方法都感兴趣，但为了保持这里的简单明了，让我们说是的，一旦它到达终点，就应该这样！您需要跟踪索引，而不是id。重写reducer以返回一个具有两个属性的对象-一个是此数组，另一个是selectedIndex，您会在不断单击时进行更新-selectedIndex最初为0或-1-取决于您的要求是否要从API获取下一项并建立列表，或者整个列表处于状态，您只想遍历选定的索引？当您到达列表中的最后一项时，是否希望它循环回到开始并再次返回第一个元素？或者，一旦它到达终点，应用程序就停止显示数据了？这更需要理解如何使redux正常工作，因此我对任何一种方法都感兴趣，但为了保持这里的简单明了，让我们说是的，一旦它到达终点，就应该这样！您需要跟踪索引，而不是id。重写reducer以返回一个具有两个属性的对象-一个是此数组，另一个是selectedIndex，您会在不断单击时进行更新-selectedIndex最初为0或-1-取决于您的要求是否要从API获取下一项并建立列表，或者整个列表都处于状态，您只是想遍历选定的索引？