Redux-ORM introduce

Posted 2022-07-15 ignacio

Redux-ORM

Redux-ORM 库提供了一个非常有用的抽象层，用于管理 Redux store 中存储的范式化数据。它允许你声明 Model 类并且定义他们之间的关系。然后它可以为你的数据类型生成新“表”，充当用于查找数据的特殊选择器工具，并且对数据执行不可变更新。

有几种方法可以用 Redux-ORM 执行数据更新。首选，Redux-ORM 文档建议在每个 Model 子类上定义 reducer 函数，然后将自动生成的组合 reducer 函数放到 store 中：

// models.js
import  Model, many, Schema  from ‘redux-orm‘

export class Post extends Model 
  static get fields() 
    return 
      // 定义一个多边关系 - 一个 Post 可以有多个 Comments，
      // 字段名是 “comments”
      comments: many(‘Comment‘)
    
  

  static reducer(state, action, Post) 
    switch (action.type) 
      case ‘CREATE_POST‘: 
        // 排队创建一个 Post 实例
        Post.create(action.payload)
        break
      
      case ‘ADD_COMMENT‘: 
        const  payload  = action
        const  postId, commentId  = payload
        // 排队增加一个 Comment ID 和 Post 实例的联系
        Post.withId(postId).comments.add(commentId)
        break
      
    

    // Redux-ORM 将在返回后自动应用排队的更新
  

Post.modelName = ‘Post‘

export class Comment extends Model 
  static get fields() 
    return 
  

  static reducer(state, action, Comment) 
    switch (action.type) 
      case ‘ADD_COMMENT‘: 
        const  payload  = action
        const  commentId, commentText  = payload

        // 排队创建一个 Comment 实例
        Comment.create( id: commentId, text: commentText )
        break
      
    

    // Redux-ORM 将在返回后自动应用排队的更新
  

Comment.modelName = ‘Comment‘

// 创建 Schema 实例，然后和 Post、Comment 数据模型挂钩起来
export const schema = new Schema()
schema.register(Post, Comment)

// main.js
import  createStore, combineReducers  from ‘redux‘
import  schema  from ‘./models‘

const rootReducer = combineReducers(
  // 插入 Redux-ORM 自动生成的 reducer，这将
  // 初始化一个数据模型 “表”，并且和我们在
  // 每个 Model 子类中定义的 reducer 逻辑挂钩起来
  entities: schema.reducer()
)

// dispatch 一个 action 以创建一个 Post 实例
store.dispatch(
  type: ‘CREATE_POST‘,
  payload: 
    id: 1,
    name: ‘Test Post Please Ignore‘
  
)

// dispath 一个 action 以创建一个 Comment 实例作为上个 Post 的子元素
store.dispatch(
  type: ‘ADD_COMMENT‘,
  payload: 
    postId: 1,
    commentId: 123,
    commentText: ‘This is a comment‘
  
)

Redux-ORM 库维护要应用的内部更新队列。这些更新是不可变更新，这个库简化了这个更新过程。

使用 Redux-ORM 的另一个变化是用一个单一的 case reducer 作为抽象层。

import  schema  from ‘./models‘

// 假设这个 case reducer 正在我们的 “entities” 切片 reducer 使用，
// 并且我们在 Redux-ORM 的 Model 子类上没有定义 reducer
function addComment(entitiesState, action) 
  const session = schema.from(entitiesState)
  const  Post, Comment  = session
  const  payload  = action
  const  postId, commentId, commentText  = payload

  const post = Post.withId(postId)
  post.comments.add(commentId)

  Comment.create( id: commentId, text: commentText )

  return session.reduce()

总之，Redux-ORM 提供了一组非常有用的抽象，用于定义数据类型之间的关系，在我们的 state 中创建了一个 “表”，检索和反规划关系数据，以及将不可变更新应用于关系数据。

Redux-ORM

Redux-ORM 库提供了一个非常有用的抽象层，用于管理 Redux store 中存储的范式化数据。它允许你声明 Model 类并且定义他们之间的关系。然后它可以为你的数据类型生成新“表”，充当用于查找数据的特殊选择器工具，并且对数据执行不可变更新。

有几种方法可以用 Redux-ORM 执行数据更新。首选，Redux-ORM 文档建议在每个 Model 子类上定义 reducer 函数，然后将自动生成的组合 reducer 函数放到 store 中：

// models.js
import  Model, many, Schema  from ‘redux-orm‘

export class Post extends Model 
  static get fields() 
    return 
      // 定义一个多边关系 - 一个 Post 可以有多个 Comments，
      // 字段名是 “comments”
      comments: many(‘Comment‘)
    
  

  static reducer(state, action, Post) 
    switch (action.type) 
      case ‘CREATE_POST‘: 
        // 排队创建一个 Post 实例
        Post.create(action.payload)
        break
      
      case ‘ADD_COMMENT‘: 
        const  payload  = action
        const  postId, commentId  = payload
        // 排队增加一个 Comment ID 和 Post 实例的联系
        Post.withId(postId).comments.add(commentId)
        break
      
    

    // Redux-ORM 将在返回后自动应用排队的更新
  

Post.modelName = ‘Post‘

export class Comment extends Model 
  static get fields() 
    return 
  

  static reducer(state, action, Comment) 
    switch (action.type) 
      case ‘ADD_COMMENT‘: 
        const  payload  = action
        const  commentId, commentText  = payload

        // 排队创建一个 Comment 实例
        Comment.create( id: commentId, text: commentText )
        break
      
    

    // Redux-ORM 将在返回后自动应用排队的更新
  

Comment.modelName = ‘Comment‘

// 创建 Schema 实例，然后和 Post、Comment 数据模型挂钩起来
export const schema = new Schema()
schema.register(Post, Comment)

// main.js
import  createStore, combineReducers  from ‘redux‘
import  schema  from ‘./models‘

const rootReducer = combineReducers(
  // 插入 Redux-ORM 自动生成的 reducer，这将
  // 初始化一个数据模型 “表”，并且和我们在
  // 每个 Model 子类中定义的 reducer 逻辑挂钩起来
  entities: schema.reducer()
)

// dispatch 一个 action 以创建一个 Post 实例
store.dispatch(
  type: ‘CREATE_POST‘,
  payload: 
    id: 1,
    name: ‘Test Post Please Ignore‘
  
)

// dispath 一个 action 以创建一个 Comment 实例作为上个 Post 的子元素
store.dispatch(
  type: ‘ADD_COMMENT‘,
  payload: 
    postId: 1,
    commentId: 123,
    commentText: ‘This is a comment‘
  
)

Redux-ORM 库维护要应用的内部更新队列。这些更新是不可变更新，这个库简化了这个更新过程。

使用 Redux-ORM 的另一个变化是用一个单一的 case reducer 作为抽象层。

import  schema  from ‘./models‘

// 假设这个 case reducer 正在我们的 “entities” 切片 reducer 使用，
// 并且我们在 Redux-ORM 的 Model 子类上没有定义 reducer
function addComment(entitiesState, action) 
  const session = schema.from(entitiesState)
  const  Post, Comment  = session
  const  payload  = action
  const  postId, commentId, commentText  = payload

  const post = Post.withId(postId)
  post.comments.add(commentId)

  Comment.create( id: commentId, text: commentText )

  return session.reduce()

总之，Redux-ORM 提供了一组非常有用的抽象，用于定义数据类型之间的关系，在我们的 state 中创建了一个 “表”，检索和反规划关系数据，以及将不可变更新应用于关系数据。