natur-immer

• 将 immer 集成到 natur 中的中间件

安装

# npm install natur-immer -S
$ yarn install natur-immer

介绍

1. 将 immer 集成到 natur 中，使得在 action 中修改 state 时，只需使用 mutable 的写法即可

教程

替换thunkMiddleware

将natur的thunkMiddleware替换为natur-immer的thunkMiddleware

import { createStore } from 'natur';
import { thunkMiddleware } from 'natur-immer';

export const store = createStore({/* ... */}, {/* ... */}, {
  middlewares: [
      thunkMiddleware, // 使用natur-immer的thunkMiddleware中间件
  ]
});

使用

这里我们以用户模块为例子

user-module.ts

import { ITP } from 'natur-immer';

// 这是mock从后端获取用户的待办事项方法
const mockFetchTodo = () =>
  new Promise<{ name: string; status: number }[]>((res) =>
    res([
      {
        name: "play game",
        status: 0,
      },
      {
        name: "work task1",
        status: 0,
      },
    ])
  );

// 这是用户信息
const state = {
  name: "tom",
  age: 10,
  todo: [
    {
      name: "study english",
      status: 0,
    },
  ],
};
// 用户state类型
type State = typeof state;

const actions = {
  // 更新用户年龄
  updateAge: (age: number) => ({ setState }: ITP<State>) => {
    // setState就像immer中的produce
    return setState((state) => {state.age = age});
  },
  // 更新用户todo，返回state
  fetchTodo: () => async ({ setState }: ITP<State>) => {
    const res = await mockFetchTodo();
    return setState((state) => {
      state.todo.push(...res); // 直接修改
    }); // 然后返回这state(推荐返回)
  },
  // 更新用户todo，不返回state
  fetchTodoWithoutReturn: () => async ({
    setState,
  }: ITP<State>) => {
    const res = await mockFetchTodo();
    setState((state) => {
      // 或者不返回
      state.todo.push(...res);
    });
  },

};

export default {
  state,
  actions,
};

NaturFactory

• NaturFactory继承NaturBaseFactory，重写了actionsCreator

  import { NaturFactory } from 'natur-immer';
  
  const state = {
    count: 1,
  };
  
  const createMap = NaturFactory.mapCreator(state);
  
  const maps = {
    isOdd: createMap(
      s => s.count,
      count => count % 2 === 1
    )
  }
  // The second parameter is optional; if you don't have maps, you don't need to pass it
  const createActions = NaturFactory.actionsCreator(state, maps);
  
  const actions = createActions({
    // The type of 'api' here will be automatically suggested, no need to manually declare
    updateCount: (count: number) => api => {
      api.setState(count)
    }
  })

NOTE

• 返回 state 和不返回 state 均可以正常运行，但是无返回的 action 在调用 action 的地方是没有返回值类型的

import store from "store";

const user = store.getModule("user");

(async () => {
  const res1 = user.actions.fetchTodo(); // 这里的res1是user模块的State类型
  const res2 = user.actions.fetchTodoWithoutReturn(); // 这里的res2的ts类型是undefined类型
})();