1 篇博文 含有标签「状态库」

import { create } from 'zustand'
import { devtools, persist, subscribeWithSelector } from 'zustand/middleware'
import { immer } from 'zustand/middleware/immer'

// 🔥 痛点1：多中间件嵌套，括号套括号，类型推导经常丢失
const useProjectStore = create(
  devtools(
    persist(
      subscribeWithSelector(
        immer((set, get) => ({
          workspaces: [],
          users: {},
          ui: {
            activeWorkspaceId: null,
            activeBoardId: null,
            sidebarCollapsed: false,
            taskDetailModal: { visible: false, taskId: null },
            searchQuery: '',
            filters: { priority: [], assignee: [], tags: [] },
          },
          connection: { status: 'disconnected', lastSyncAt: null },

          // ---- Actions ----

          // 🔥 痛点2：即使用了 immer，5 层嵌套的查找逻辑依然冗长
          updateTaskTitle: (wsId, boardId, stageId, taskId, newTitle) =>
            set((state) => {
              const ws = state.workspaces.find((w) => w.id === wsId)
              const board = ws?.boards.find((b) => b.id === boardId)
              const stage = board?.stages.find((s) => s.id === stageId)
              const task = stage?.tasks.find((t) => t.id === taskId)
              if (task) task.title = newTitle
            }),

          // 完成任务
          completeTask: (wsId, boardId, stageId, taskId) =>
            set((state) => {
              const ws = state.workspaces.find((w) => w.id === wsId)
              const board = ws?.boards.find((b) => b.id === boardId)
              const stage = board?.stages.find((s) => s.id === stageId)
              const task = stage?.tasks.find((t) => t.id === taskId)
              if (task) {
                task.done = true
                task.tags.push('system-completed')
                // 同时标记所有子任务为完成
                task.subtasks.forEach((st) => (st.done = true))
              }
            }),

          // 移动任务到另一个阶段
          moveTask: (wsId, boardId, fromStageId, toStageId, taskId) =>
            set((state) => {
              const ws = state.workspaces.find((w) => w.id === wsId)
              const board = ws?.boards.find((b) => b.id === boardId)
              const fromStage = board?.stages.find((s) => s.id === fromStageId)
              const toStage = board?.stages.find((s) => s.id === toStageId)
              if (fromStage && toStage) {
                const taskIndex = fromStage.tasks.findIndex(
                  (t) => t.id === taskId
                )
                if (taskIndex > -1) {
                  const [task] = fromStage.tasks.splice(taskIndex, 1)
                  toStage.tasks.push(task)
                }
              }
            }),

          // 🔥 痛点3：异步操作需要手动处理 loading、error、回滚
          syncTaskToServer: async (wsId, boardId, stageId, taskId) => {
            const state = get()
            const ws = state.workspaces.find((w) => w.id === wsId)
            const board = ws?.boards.find((b) => b.id === boardId)
            const stage = board?.stages.find((s) => s.id === stageId)
            const task = stage?.tasks.find((t) => t.id === taskId)
            try {
              await fetch(`/api/tasks/${taskId}`, {
                method: 'PUT',
                body: JSON.stringify(task),
              })
              set((state) => {
                state.connection.lastSyncAt = Date.now()
              })
            } catch (err) {
              // 失败了怎么回滚？要自己存快照...
              console.error('同步失败，需要手动实现回滚逻辑')
            }
          },

          // 更新搜索
          setSearchQuery: (query) =>
            set((state) => {
              state.ui.searchQuery = query
            }),

          // 切换侧边栏
          toggleSidebar: () =>
            set((state) => {
              state.ui.sidebarCollapsed = !state.ui.sidebarCollapsed
            }),
        }))
      ),
      { name: 'project-store' }  // persist 配置
    ),
    { name: 'ProjectStore' }     // devtools 配置
  )
)  // 🔥 数一数，光是末尾就有多少个闭合括号？

// projectSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// 🔥 痛点2：异步操作必须用 createAsyncThunk，又是一层包装
export const syncTaskToServer = createAsyncThunk(
  'project/syncTask',
  async ({ wsId, boardId, stageId, taskId }, { getState, rejectWithValue }) => {
    const state = getState()
    // 🔥 从 store 里取嵌套数据？又是一串 find...
    const ws = state.project.workspaces.find((w) => w.id === wsId)
    const board = ws?.boards.find((b) => b.id === boardId)
    const stage = board?.stages.find((s) => s.id === stageId)
    const task = stage?.tasks.find((t) => t.id === taskId)
    try {
      const res = await fetch(`/api/tasks/${taskId}`, {
        method: 'PUT',
        body: JSON.stringify(task),
      })
      return await res.json()
    } catch (err) {
      return rejectWithValue(err.message)
    }
  }
)

const projectSlice = createSlice({
  name: 'project',
  initialState: {
    workspaces: [],
    syncStatus: 'idle',  // 🔥 还要额外维护同步状态
    syncError: null,
  },
  reducers: {
    updateTaskTitle: (state, action) => {
      const { wsId, boardId, stageId, taskId, newTitle } = action.payload
      const ws = state.workspaces.find((w) => w.id === wsId)
      const board = ws?.boards.find((b) => b.id === boardId)
      const stage = board?.stages.find((s) => s.id === stageId)
      const task = stage?.tasks.find((t) => t.id === taskId)
      if (task) task.title = newTitle
    },

    completeTask: (state, action) => {
      const { wsId, boardId, stageId, taskId } = action.payload
      const ws = state.workspaces.find((w) => w.id === wsId)
      const board = ws?.boards.find((b) => b.id === boardId)
      const stage = board?.stages.find((s) => s.id === stageId)
      const task = stage?.tasks.find((t) => t.id === taskId)
      if (task) {
        task.done = true
        task.tags.push('system-completed')
        task.subtasks.forEach((st) => (st.done = true))
      }
    },

    moveTask: (state, action) => {
      const { wsId, boardId, fromStageId, toStageId, taskId } = action.payload
      const ws = state.workspaces.find((w) => w.id === wsId)
      const board = ws?.boards.find((b) => b.id === boardId)
      const fromStage = board?.stages.find((s) => s.id === fromStageId)
      const toStage = board?.stages.find((s) => s.id === toStageId)
      if (fromStage && toStage) {
        const idx = fromStage.tasks.findIndex((t) => t.id === taskId)
        if (idx > -1) {
          const [task] = fromStage.tasks.splice(idx, 1)
          toStage.tasks.push(task)
        }
      }
    },
  },

  // 🔥 痛点3：extraReducers 处理异步的三种状态，每个 thunk 都要写三遍
  extraReducers: (builder) => {
    builder
      .addCase(syncTaskToServer.pending, (state) => {
        state.syncStatus = 'loading'
        state.syncError = null
      })
      .addCase(syncTaskToServer.fulfilled, (state) => {
        state.syncStatus = 'succeeded'
      })
      .addCase(syncTaskToServer.rejected, (state, action) => {
        state.syncStatus = 'failed'
        state.syncError = action.payload
      })
  },
})

// uiSlice.js — 🔥 痛点4：状态按"领域"拆分成多个 Slice，互相引用极其麻烦
const uiSlice = createSlice({
  name: 'ui',
  initialState: {
    activeWorkspaceId: null,
    activeBoardId: null,
    sidebarCollapsed: false,
    taskDetailModal: { visible: false, taskId: null },
    searchQuery: '',
    filters: { priority: [], assignee: [], tags: [] },
  },
  reducers: {
    setActiveWorkspace: (state, action) => {
      state.activeWorkspaceId = action.payload
    },
    setActiveBoard: (state, action) => {
      state.activeBoardId = action.payload
    },
    toggleSidebar: (state) => {
      state.sidebarCollapsed = !state.sidebarCollapsed
    },
    openTaskDetail: (state, action) => {
      state.taskDetailModal = { visible: true, taskId: action.payload }
    },
    closeTaskDetail: (state) => {
      state.taskDetailModal = { visible: false, taskId: null }
    },
    setSearchQuery: (state, action) => {
      state.searchQuery = action.payload
    },
    setFilters: (state, action) => {
      state.filters = { ...state.filters, ...action.payload }
    },
  },
})

// connectionSlice.js
const connectionSlice = createSlice({
  name: 'connection',
  initialState: { status: 'disconnected', lastSyncAt: null },
  reducers: {
    setConnectionStatus: (state, action) => {
      state.status = action.payload
    },
  },
  // 🔥 痛点5：跨 Slice 响应——connection 想响应 syncTask 的状态？
  // 必须在 extraReducers 里监听另一个 Slice 的 action
  extraReducers: (builder) => {
    builder.addCase(syncTaskToServer.fulfilled, (state) => {
      state.lastSyncAt = Date.now()
    })
  },
})

// store.js
import { configureStore } from '@reduxjs/toolkit'
import { createLogger } from 'redux-logger'

// 🔥 痛点6：中间件配置，每个都有自己的 API 和坑
const loggerMiddleware = createLogger({
  collapsed: true,
  diff: true,
})

export const store = configureStore({
  reducer: {
    project: projectSlice.reducer,
    ui: uiSlice.reducer,
    connection: connectionSlice.reducer,
    // 🔥 每新增一个 Slice 就要来这里注册
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 🔥 Date 对象不可序列化？要手动忽略...
        ignoredActions: ['project/syncTask/fulfilled'],
        ignoredPaths: ['connection.lastSyncAt'],
      },
    }).concat(loggerMiddleware),
})

// 🔥 痛点7：别忘了导出 Actions
export const {
  updateTaskTitle,
  completeTask,
  moveTask,
} = projectSlice.actions
export const {
  setActiveWorkspace,
  setActiveBoard,
  toggleSidebar,
  openTaskDetail,
  closeTaskDetail,
  setSearchQuery,
  setFilters,
} = uiSlice.actions
export const { setConnectionStatus } = connectionSlice.actions

import { atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// 🔥 痛点1：状态要被拆成一堆 atom
const workspacesAtom = atom([])
const usersAtom = atom({})
const connectionAtom = atom({ status: 'disconnected', lastSyncAt: null })

// UI 状态 —— 每个字段一个 atom
const activeWorkspaceIdAtom = atomWithStorage('activeWsId', null)
const activeBoardIdAtom = atomWithStorage('activeBoardId', null)
const sidebarCollapsedAtom = atomWithStorage('sidebarCollapsed', false)
const taskDetailModalAtom = atom({ visible: false, taskId: null })
const searchQueryAtom = atom('')
const filtersAtom = atom({ priority: [], assignee: [], tags: [] })

// 🔥 痛点2：派生 atom，每层嵌套都需要一个 derived atom
const activeWorkspaceAtom = atom((get) => {
  const workspaces = get(workspacesAtom)
  const activeId = get(activeWorkspaceIdAtom)
  return workspaces.find((ws) => ws.id === activeId) ?? null
})

const activeBoardAtom = atom((get) => {
  const ws = get(activeWorkspaceAtom)
  const boardId = get(activeBoardIdAtom)
  return ws?.boards.find((b) => b.id === boardId) ?? null
})

const activeBoardStagesAtom = atom((get) => {
  const board = get(activeBoardAtom)
  return board?.stages ?? []
})

// 🔥 痛点3：过滤逻辑也要变成 atom
const filteredTasksAtom = atom((get) => {
  const stages = get(activeBoardStagesAtom)
  const query = get(searchQueryAtom)
  const filters = get(filtersAtom)
  return stages.flatMap((stage) =>
    stage.tasks.filter((task) => {
      if (query && !task.title.includes(query)) return false
      if (
        filters.priority.length &&
        !filters.priority.includes(task.priority)
      )
        return false
      return true
    })
  )
})

// 🔥 痛点4：写操作也必须是 writable atom，又是一层抽象
const updateTaskTitleAtom = atom(
  null,
  (get, set, { wsId, boardId, stageId, taskId, newTitle }) => {
    const workspaces = get(workspacesAtom)
    const newWorkspaces = workspaces.map((ws) =>
      ws.id === wsId
        ? {
            ...ws,
            boards: ws.boards.map((b) =>
              b.id === boardId
                ? {
                    ...b,
                    stages: b.stages.map((s) =>
                      s.id === stageId
                        ? {
                            ...s,
                            tasks: s.tasks.map((t) =>
                              t.id === taskId ? { ...t, title: newTitle } : t
                            ),
                          }
                        : s
                    ),
                  }
                : b
            ),
          }
        : ws
    )
    set(workspacesAtom, newWorkspaces)
  }
)

const completeTaskAtom = atom(
  null,
  (get, set, { wsId, boardId, stageId, taskId }) => {
    // 🔥 又是一大段 map 嵌套...和 Zustand 一模一样的痛苦
    const workspaces = get(workspacesAtom)
    const newWorkspaces = workspaces.map((ws) =>
      ws.id === wsId
        ? {
            ...ws,
            boards: ws.boards.map((b) =>
              b.id === boardId
                ? {
                    ...b,
                    stages: b.stages.map((s) =>
                      s.id === stageId
                        ? {
                            ...s,
                            tasks: s.tasks.map((t) =>
                              t.id === taskId
                                ? {
                                    ...t,
                                    done: true,
                                    tags: [...t.tags, 'system-completed'],
                                    subtasks: t.subtasks.map((st) => ({
                                      ...st,
                                      done: true,
                                    })),
                                  }
                                : t
                            ),
                          }
                        : s
                    ),
                  }
                : b
            ),
          }
        : ws
    )
    set(workspacesAtom, newWorkspaces)
  }
)

// 🔥 异步 atom
const syncTaskAtom = atom(null, async (get, set, { taskId }) => {
  const workspaces = get(workspacesAtom)
  // ... 又要从嵌套结构里 find task
  try {
    await fetch(`/api/tasks/${taskId}`, { method: 'PUT' })
    set(connectionAtom, { status: 'connected', lastSyncAt: Date.now() })
  } catch {
    set(connectionAtom, (prev) => ({ ...prev, status: 'disconnected' }))
  }
})

import { proxy, useSnapshot, subscribe } from 'valtio'
import { devtools } from 'valtio/utils'

// ✅ 定义确实简单
const state = proxy({
  workspaces: [],
  users: {},
  ui: {
    activeWorkspaceId: null,
    activeBoardId: null,
    sidebarCollapsed: false,
    taskDetailModal: { visible: false, taskId: null },
    searchQuery: '',
    filters: { priority: [], assignee: [], tags: [] },
  },
  connection: { status: 'disconnected', lastSyncAt: null },
})

// ✅ 修改操作确实直观
function updateTaskTitle(wsId, boardId, stageId, taskId, newTitle) {
  const ws = state.workspaces.find((w) => w.id === wsId)
  const board = ws?.boards.find((b) => b.id === boardId)
  const stage = board?.stages.find((s) => s.id === stageId)
  const task = stage?.tasks.find((t) => t.id === taskId)
  if (task) task.title = newTitle
}

function completeTask(wsId, boardId, stageId, taskId) {
  const ws = state.workspaces.find((w) => w.id === wsId)
  const board = ws?.boards.find((b) => b.id === boardId)
  const stage = board?.stages.find((s) => s.id === stageId)
  const task = stage?.tasks.find((t) => t.id === taskId)
  if (task) {
    task.done = true
    task.tags.push('system-completed')
    task.subtasks.forEach((st) => (st.done = true))
  }
}