redux - 使用 redux-toolkit 重写 redux-orm reducer

Question

问题(tl;博士)

我们如何创建 custom redux-orm reducer与 redux-toolkit的createSlice ?

有没有比这个问题中提供的尝试更简单、推荐、更优雅或只是其他解决方案？

细节

custom redux-orm reducer 的示例如下所示(简化):

function ormReducer(dbState, action) {
    const session = orm.session(dbState);
    const { Book } = session;

    switch (action.type) {
    case 'CREATE_BOOK':
        Book.create(action.payload);
        break;
    case 'REMOVE_AUTHOR_FROM_BOOK':
        Book.withId(action.payload.bookId).authors.remove(action.payload.authorId);
        break;
    case 'ASSIGN_PUBLISHER':
        Book.withId(action.payload.bookId).publisherId = action.payload.publisherId;
        break;
    }

    return session.state;
}

使用 createSlice 可以简化 reducer redux-toolkit的功能(基于 redux-toolkit usage-guide ):

const ormSlice = createSlice({
  name: 'orm',
  initialState: [],
  reducers: {
    createBook(state, action) {},
    removeAuthorFromBook(state, action) {},
    assignPublisher(state, action) {}
  }
})
const { actions, reducer } = ormSlice
export const { createBook, removeAuthorsFromBook, assignPublisher } = actions
export default reducer

但是，在 redux-orm reducer 的开始我们需要创建一个 session

const session = orm.session(dbState);

然后我们使用我们的 redux-orm reducer 魔法，最后我们需要返回状态

return session.state;

所以我们错过了 beforeEachReducer和 afterEachReducer createSlice 中的方法添加此功能。

解决方案(尝试)

我们创建了 withSession创建 session 并返回新状态的高阶函数。

const withSession = reducer => (state, action) => {
  const session = orm.session(state);
  reducer(session, action);
  return session.state;
}

我们需要在这个 withSession 中包装每个 reducer 逻辑。 .

import { createSlice } from '@reduxjs/toolkit';
import orm from './models/orm'; // defined elsewhere
// also define or import withSession here

const ormSlice = createSlice({
  name: 'orm',
  initialState: orm.session().state, // we need to provide the initial state
  reducers: {
    createBook: withSession((session, action) => {
      session.Book.create(action.payload);
    }),
    removeAuthorFromBook: withSession((session, action) => {
      session.Book.withId(action.payload.bookId).authors.remove(action.payload.authorId);
    }),
    assignPublisher: withSession((session, action) => {
      session.Book.withId(action.payload.bookId).publisherId = action.payload.publisherId;
    }),
  }
})

const { actions, reducer } = ormSlice
export const { createBook, removeAuthorsFromBook, assignPublisher } = actions
export default reducer

Answer 1

这对我来说是一个有趣的问题，因为 I created Redux Toolkit ，我在 my "Practical Redux" tutorial series 中写了大量关于使用 Redux-ORM 的文章。 .

在我的脑海中，我不得不说你的withSession() wrapper 看起来是目前最好的方法。

同时，我不确定使用 Redux-ORM 和 createSlice()在一起真的让你受益匪浅。您没有在内部使用 Immer 的不可变更新功能，因为 Redux-ORM 正在处理模型内的更新。在这种情况下，唯一真正的好处是生成 Action 创建者和 Action 类型。

您最好调用createAction()分开，并在 switch 语句中使用原始的 reducer 形式和生成的 Action 类型:

export const createBook = createAction("books/create");
export const removeAuthorFromBook = createAction("books/removeAuthor");
export const assignPublisher = createAction("books/assignPublisher");

export default function ormReducer(dbState, action) {
    const session = orm.session(dbState);
    const { Book } = session;

    switch (action.type) {
    case createBook.type:
        Book.create(action.payload);
        break;
    case removeAuthorFromBook.type:
        Book.withId(action.payload.bookId).authors.remove(action.payload.authorId);
        break;
    case assignPublisher.type:
        Book.withId(action.payload.bookId).publisherId = action.payload.publisherId;
        break;
    }

    return session.state;
}

我明白您所说的添加某种“之前/之后”处理程序，但这会增加太多复杂性。 RTK 旨在处理 80% 的用例，以及 createSlice 的 TS 类型已经非常复杂了。在这里添加更多复杂性将是不好的。