Redux-ORM introduce | 易学教程

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

来源：https://www.cnblogs.com/ignacio/p/11359119.html

标签

post

redux

payload

orm

schema

const