Question

我有一个JSON对象，我想按对象加载对象。也就是说，用户单击一个按钮，然后单击id为no的对象。如果用户再次单击该按钮，则会向他显示1，id为no的对象。将显示2 - 依此类推。现在，我已经制作了一个简化器，它只返回（整个）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 - 这是原则上正确的方法，还是你会推荐一些其他的，可能是完全不同的方式？

Answer 1

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

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

{
  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;
  }
};

您还可以将active状态由您自己的缩减器管理，类似于上面的originalListReducer和share the all state by passing it as an additional argument。类似的东西：

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;
  }
};

另一种方法是将逻辑推入动作创建者。在这种情况下，您可以使用redux-thunk查看当前状态并分发相应的＆＃34; next＆＃34;活动对象动作：

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 });
  }
};

现在你的减速器变得愚蠢了＃34; 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;
  }
};

您希望选择哪种方式really up to you。

使用Redux迭代JSON（如何为此组织我的reducer？）

1 个答案: