Easy Peasy 中如何正确使用 action 监听状态变化？

A. 楚萓提问于 2026-03-18 08:49:22 阅读 28

框架

我在用 Easy Peasy 写一个计数器，想在 count 变化时自动触发一个 action 打印日志，但写完发现根本没执行，是不是写法有问题？

我试过把监听逻辑放在 effect 里，也试过直接在 action 里调用，都不行。控制台完全没输出，感觉监听没生效。

const store = createStore({
  count: 0,
  logChange: action((state) => {
    console.log('Count changed:', state.count);
  }),
  increment: action((state) => {
    state.count += 1;
    // 想在这里自动触发 logChange，但手动调用又觉得不对
  })
});

状态管理

我来解答赞 5 收藏

反馈

2 条解答

UP主～志鸽 Lv1

我一般直接在 increment 里手动调用 logChange，这样简单有效

const store = createStore({

  count: 0,

  logChange: action((state) => {

    console.log('Count changed:', state.count);

  }),

  increment: action((state) => {

    state.count += 1;

    state.logChange();

  })

});

2026-03-24 16:22

百里新云 Lv1

兄弟，你这个需求在 Easy Peasy 里要用 listen 这个内置方法，不是直接在 action 里调。

Easy Peasy 的 listen 是专门用来监听 state 变化并触发副作用的，官方文档里也叫 "Side Effects"。你之前试的那些方法都不对路。

正确的写法是这样的：

import { createStore, action, listen } from 'easy-peasy';



const store = createStore({

  count: 0,

  increment: action((state) => {

    state.count += 1;

  }),

  logChange: action((state, payload) => {

    console.log('Count changed:', state.count);

  })

}, {

  listen: ({ onChange }) => {

    onChange(

      (state) => state.count,  // 监听哪个 state 字段

      (newValue, oldValue) => {

        // 值变化时会自动触发这里

        console.log(从 ${oldValue} 变成了 ${newValue});

      }

    );

  }

});

这里有个坑要提醒你：listen 里的回调只在 state 真正变化时才会触发。如果你 increment 之后值没变（比如已经是最大值了），它不会触发。

另外，listen 里的回调是同步的，如果你在里面想搞异步操作，比如发请求，那得换个写法，用 thunk 配合：

const store = createStore({

  count: 0,

  increment: action((state) => {

    state.count += 1;

  }),

  logChange: action((state, { newCount, oldCount }) => {

    console.log('Count changed:', oldCount, '->', newCount);

  })

}, {

  listen: ({ onChange }) => {

    onChange(

      (state) => state.count,

      (newValue, oldValue, { dispatch }) => {

        // 这里可以触发 action 或 thunk

        dispatch.logChange({ newCount: newValue, oldCount: oldValue });

      }

    );

  }

});

这样结构更清晰，监听逻辑和业务逻辑分离，count 每次变化都会自动触发 logChange，不需要在每个 action 里手动调用。

2026-03-18 14:09