# natur-immer

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

# 安装

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

# 介绍

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

# 教程

# 替换thunkMiddleware

naturthunkMiddleware替换为natur-immerthunkMiddleware


 



 



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类型
})();
最后更新: 2023/8/2 20:53:24