createStore

API 参考

语法

const store = createStore(initialState);

参数

initialState: 定义 store 初始状态和操作的对象

返回值

响应式 store 实例，包含：

value: 当前状态（读/写访问，带依赖跟踪）
setState(updater, options?): 使用 Immer 支持更新状态
subscribe(options): 细粒度订阅控制

示例

简单状态管理

import { createStore, useStoreValue } from "zenbox";

// 类型自动推断
const counterStore = createStore({ count: 0 });

// 通过 store.value 直接访问状态值
console.log("当前计数:", counterStore.value.count);

function Counter() {
  // 组件响应式订阅 store 状态变化，自动重新渲染
  const { count } = useStoreValue(counterStore);

  const increment = () => {
    counterStore.setState((state) => {
      state.count++; // 使用 Immer 风格更新状态
    });
  };

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

带操作的 Store

将状态和更新逻辑放在一起，代码更清晰可维护：

const userStore = createStore({
  // 状态
  name: "Del Wang",
  blog: "https://del.wang",
  followers: 0,

  // 方法
  follow() {
    userStore.setState((state) => {
      state.followers++;
    });
  },

  // 异步操作
  async fetchProfile() {
    const response = await fetch("https://api.github.com/users/del-wang");
    const data = await response.json();
    userStore.setState(data);
  },
});

// 直接通过 store.value 调用方法
userStore.value.follow();
await userStore.value.fetchProfile();

更新模式

1. Immer 风格更新（推荐）

适合复杂变更和嵌套状态：

store.setState((state) => {
  state.count += 1;
  state.user.profile.name = "已更新";
  state.todos.push({ id: Date.now(), text: "新待办", completed: false });
});

2. 部分对象更新

将新状态与现有状态合并：

const store = createStore({
  name: "张三",
  age: 25,
  email: "zhangsan@example.com",
  avatar: "avatar.jpg",
});

// 与现有状态浅合并
store.setState({ name: "李四", age: 30 });
// 结果: { name: "李四", age: 30, email: "zhangsan@example.com", avatar: "avatar.jpg" }

// 显式覆盖（包括 null/undefined）
store.setState({ avatar: null });
// 结果: { name: "李四", age: 30, email: "zhangsan@example.com", avatar: null }

// 未知属性会被忽略
store.setState({ unknownField: "ignored" }); // 无效果
// 结果: { name: "李四", age: 30, email: "zhangsan@example.com", avatar: null }

3. 直接赋值

适合完全状态替换或更喜欢显式赋值：

// 完全替换
store.value = { count: 1, name: "李四" };

// 部分更新（与 setState 相同）
store.value = { count: 5 }; // 合并后: { count: 5, name: "李四" }

4. 静默更新

更新状态而不触发订阅/重新渲染：

// 后台缓存更新
store.setState({ cache: freshData }, { silent: true });

最佳实践

✅ 状态和更新逻辑放在一起

const store = createStore({
  count: 0,
  increment() {
    /* 操作逻辑 */
  },
});

✅ 复杂更新使用 Immer 风格

store.setState((state) => {
  state.nested.property = newValue;
});

✅ 正确处理异步操作

async fetchData() {
  store.setState(state => { state.loading = true; });
  try {
    // API 调用
  } finally {
    store.setState(state => { state.loading = false; });
  }
}

✅ 后台数据使用静默更新

store.setState({ cache: data }, { silent: true });

API 参考

语法

参数

返回值

示例

简单状态管理

带操作的 Store

更新模式

1. Immer 风格更新（推荐）

2. 部分对象更新

3. 直接赋值

4. 静默更新

最佳实践

相关 API

目录