javascript - Redux:将 `reducres` 与非平坦状态结合起来，避免创建大量 reducer

标签 javascript redux

我学习 Redux 并尝试为学校、类(class)和学生创建和组合 reducers 的简单模型。我想实现我的状态的这种结构:

const model = {
  schools:[
    { id: "91cb54b3-1289-4520-abe1-d8826d39fce3",
      name: "School #25", address: "Green str. 12",
      classes: [
        { id: "336ff233-746f-441b-84c7-0e6c275a7e24", name: "1A",
          students: [
            { id: "475dd06e-a52d-4d90-aa07-46eab7c029a7", name: "Ivan Ivanov",
              age: 7, phones: ["+7-123-456-78-90"] }
          ]
        }
      ]
    }
  ]
};

我知道我可以为每个属性创建 reducer ，但是如果模型很大，这将非常困难。因此我想尽量减少 reducer 的数量。我认为解决方案很简单，但我面临着我的 reducer 组合的问题......

此外，我看到添加问题...例如，对于我当前的实现，如何在第二所学校添加 class 实例？这意味着我要指向学校 ID...但是如果我需要添加学生的电话，那么我需要指向每个家长的 ID 以获得必要的学生(即学校、类(class)和学生的 ID)...可能我当前的实现是错误的...我还不确定...

我很困惑。 :((( 我了解如何使用 combineReducers 进行简单的平面模型，但我不知道如何处理更复杂的情况...

这是我的“沙箱”，我在其中学习 Redux 并尝试使用 combineReducers 来实现我的“商业模式”:

import {createStore} from "redux";
import {uuidv4} from "uuid/v4"; // yarn add uuid

const createId = uuidv4; // creates new GUID
const deepClone = object => JSON.parse(JSON.stringify(object));

/**
I will use simple model: the shools, classes, and students:

const model = {
  schools:[
    { id: "91cb54b3-1289-4520-abe1-d8826d39fce3",
      name: "School #25", address: "Green str. 12",
      classes: [
        { id: "336ff233-746f-441b-84c7-0e6c275a7e24", name: "1A",
          students: [
            { id: "475dd06e-a52d-4d90-aa07-46eab7c029a7", name: "Ivan Ivanov",
              age: 7, phones: ["+7-123-456-78-90"] }
          ]
        }
      ]
    }
  ]
};
*/

// ================= Business model ====================
function createSchool(name = "", address = "", classes = []){
  return { id: createId(), name, address, classes };
}

function createClass(name = "", students = []){
  return { id: createId(), name, students };
}

function createStudent(name = "", age = 0, phones = []){
  return { id: createId(), name, age, phones };
}

function createPhone(phone = ""){
  return { id: createId(), phone };
}
// ================= end of Business model =============

const ACTION_KEYS = { // It is used by Action model
  CREATE_SCHOOL: "CREATE_SCHOOL",
  UPDATE_SCHOOL: "UPDATE_SCHOOL",
  DELETE_SCHOOL: "DELETE_SCHOOL",

  CREATE_CLASS: "CREATE_CLASS",
  UPDATE_CLASS: "UPDATE_CLASS",
  DELETE_CLASS: "DELETE_CLASS",

  CREATE_STUDENT: "CREATE_STUDENT",
  UPDATE_STUDENT: "UPDATE_STUDENT",
  DELETE_STUDENT: "DELETE_STUDENT",

  CREATE_PHONE: "CREATE_PHONE",
  UPDATE_PHONE: "UPDATE_PHONE",
  DELETE_PHONE: "DELETE_PHONE",
}

// ==================== Action model ======================

// School actions:

function create_createShoolAction(value = createSchool()){
  // use createSchool() function for 'value' initializing
  return {type: ACTION_KEYS.CREATE_SCHOOL, value };
}

function create_updateShoolAction(value){
  // use createSchool() function for 'value' initializing
  return {type: ACTION_KEYS.UPDATE_SCHOOL, value };
}

function create_deleteShoolAction(id){
  return {type: ACTION_KEYS.DELETE_SCHOOL, id };
}

// Class actions:

function create_createClassAction(value = createClass()){
  // use createClass() function for 'value' initializing
  return {type: ACTION_KEYS.CREATE_CLASS, value };
}

function create_updateClassAction(value){
  // use createClass() function for 'value' initializing
  return {type: ACTION_KEYS.UPDATE_CLASS, value };
}

function create_deleteClassAction(id){
  return {type: ACTION_KEYS.DELETE_CLASS, id };
}

// Student actions:

function create_createStudentAction(value = createStudent()){
  // use createStudent() function for 'value' initializing
  return {type: ACTION_KEYS.CREATE_STUDENT, value };
}

function create_updateStudentAction(value){
  // use createStudent() function for 'value' initializing
  return {type: ACTION_KEYS.UPDATE_STUDENT, value };
}

function create_deleteStudentAction(id){
  return {type: ACTION_KEYS.DELETE_STUDENT, id };
}

// Phone actions:

function create_createPhoneAction(value = createPhone()){
  // use createPhone() function for 'value' initializing
  return {type: ACTION_KEYS.CREATE_PHONE, value };
}

function create_updatePhoneAction(value){
  // use createPhone() function for 'value' initializing
  return {type: ACTION_KEYS.UPDATE_PHONE, value };
}

function create_deletePhoneAction(id){
  return {type: ACTION_KEYS.DELETE_PHONE, id };
}
// ==================== end of Action model ===============

// ========================= Reducers =====================

// This function contains common implementation for all my reducers (I'm lazy).
function reducer(state = [], action, action_keys){
  switch(action.type){
    switch action_keys[0]: { // create new item
      return [...deepClone(state), ...deepClone(action.value)];
      break;
    }
    switch action_keys[1]: { // update existing item
      const index = state.findIndex(n => n.id === action.value.id);
      if(index < 0) return state;
      const clonedState = [...deepClone(state)];
      return [...clonedState.slice(0, index), ...deepClone(action.value),
        ...clonedState.slice(index + 1)];
      break;
    }
    switch action_keys[2]: { // delete existing item
      const index = state.findIndex(n => n.id === action.id);
      if(index < 0) return state;
      const clonedState = [...deepClone(state)];
      return [...clonedState.slice(0, index), ...clonedState.slice(index + 1)];
      break;
    }
    default: { // otherwise return original
      return state;
      break;
    }
  }
}

function schoolReducer(state = [], action){
  return reducer(state, action, [
    ACTION_KEYS.CREATE_SCHOOL,
    ACTION_KEYS.UPDATE_SCHOOL,
    ACTION_KEYS.DELETE_SCHOOL
  ]);
}

function classReducer(state = [], action){
  return reducer(state, action, [
    ACTION_KEYS.CREATE_CLASS,
    ACTION_KEYS.UPDATE_CLASS,
    ACTION_KEYS.DELETE_CLASS
  ]);
}

function studentReducer(state = [], action){
  return reducer(state, action, [
    ACTION_KEYS.CREATE_STUDENT,
    ACTION_KEYS.UPDATE_STUDENT,
    ACTION_KEYS.DELETE_STUDENT
  ]);
}

function phoneReducer(state = [], action){
  return reducer(state, action, [
    ACTION_KEYS.CREATE_PHONE,
    ACTION_KEYS.UPDATE_PHONE,
    ACTION_KEYS.DELETE_PHONE
  ]);
}

// The "top-level" combined reducer
const combinedReducer = combineReducers({
  schools: schoolReducer
  // Oops... How to build the hierarchy of the remaining reducers (classReducer,
  // studentReducer, and phoneReducer)?
});
// =============== end of Reducers =====================

const store = createStore(combinedReducer);

const unsubscribe = store.subscribe(() => console.log("subscribe:",
  store.getState()));

// Now to work with the store...

store.dispatch(create_createShoolAction(createShool("Shool #5", "Green str. 7")));
store.dispatch(create_createShoolAction(createShool("Shool #12", "Read str. 15")));
store.dispatch(create_createShoolAction(createShool("Shool #501", "Wall str. 123")));

// Now, how can I add a new class into the "Shool #12" school?
// store.dispatch(???);

如何正确地创建和组合 reducer 以应对这种不平坦的状态？

最佳答案

I understand I can create reducer for each propery, but it will be very hard if model will be big.

我不明白你的观点，因为你已经体验到更新嵌套结构是多么糟糕:你需要深入探索，搜索字段并仔细处理更新，以免破坏现有数据。更糟糕的是，使用嵌套结构，渲染 React 组件的成本将会很高，因为更新电话号码将需要您深度克隆几乎所有内容。

通常我的 redux 状态形象是一个客户端 sql 数据库，其中每个模型(例如学校、类(class)、学生)应存储在单独的表中；子项应包含父项 id，父项可以包含子项 id 作为双向搜索的数组。

最好的方法是将每个模型的 reducer 分成单独的 reducer ，并使用一些中间件(例如 redux-thunk 或 redux-saga)在添加或删除任何内容时处理相关模型中的更新。

如果你懒得分解东西，那么 1 个 reducer 仍然可以；但您需要标准化数据以便更好地操作数据:

const initialState = {
  schools: {},
  classes: {},
  students: {}
}

function reducer(state = initialState, actions, action_keys) {
  ...
}

因此您的数据样本可能如下所示:

{
  schools: {
    "91cb54b3-1289-4520-abe1-d8826d39fce3": {
      id: "91cb54b3-1289-4520-abe1-d8826d39fce3",
      name: "School #25",
      address: "Green str. 12",
      classes: [
        "336ff233-746f-441b-84c7-0e6c275a7e24"
      ]
    }
  },
  classes: {
    "336ff233-746f-441b-84c7-0e6c275a7e24": {
      id: "336ff233-746f-441b-84c7-0e6c275a7e24",
      schoolId: "91cb54b3-1289-4520-abe1-d8826d39fce3",
      name: "1A",
      students: [
        "475dd06e-a52d-4d90-aa07-46eab7c029a7"
      ]
    }
  },
  students: {
    "475dd06e-a52d-4d90-aa07-46eab7c029a7": {
      id: "475dd06e-a52d-4d90-aa07-46eab7c029a7",
      classId: "336ff233-746f-441b-84c7-0e6c275a7e24"
      name: "Ivan Ivanov",
      age: 7,
      phones: ["+7-123-456-78-90"]
    }
  }
}

如何实现操作来处理更新数据是你自己的问题，但是有了上面的结构，你应该更容易解决。

关于javascript - Redux:将 `reducres` 与非平坦状态结合起来，避免创建大量 reducer ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53079010/

上一篇：javascript - jquery订阅函数返回错误

下一篇：Javascript 从多个选项卡更新 Cookie 中的计数器

相关文章：

javascript - 如何让 super 代理返回 promise

javascript - React - useEffect() 中出现错误。这是否会使页面上的所有内容都进入无限循环？

javascript - 为什么在 Redux 中看似默认调用了 reducer？

javascript - 为什么我们在 React 中需要 redux

reactjs - React Redux : More containers v. 秒。更少的容器

javascript - 输入字段需要受控和非受控

javascript - 悬停功能触发器

javascript - 按类别名称过滤数组

javascript - 使用 Node.js 连接到 Cloudant CouchDB？

reactjs - react 错误说对象作为 react 子项无效

©2024 IT工具网  联系我们