Redux Toolkit 如何在createSlice外部访问store状态

独立函数访问状态的推荐实现 #

你现在在reducer调用时传入当前state和payload的思路是对的，针对不同场景有对应更规范的官方推荐写法，切记不要在独立函数里直接import store实例拿状态——这种写法会导致模块循环依赖、逻辑难以单测，是典型的反模式。

• 纯逻辑、仅依赖当前slice状态的场景
  如果checkValid是没有副作用的纯校验/计算逻辑，只用到当前board切片的状态，直接把依赖的state、action.payload作为参数传入即可，这也是Redux官方文档示例中常用的抽离方式。抽离的函数可以直接接收Immer生成的draft state，和写在reducer内部的逻辑没有使用差异：

const checkValid = (state, payload) => {
  // 既可以直接修改传入的draft state，也可以返回计算/校验结果
  return state.boardItems.every(item => item.stock > payload.minRequired)
}

export const boardSlice = createSlice({
  name: 'board',
  initialState,
  reducers: {
    runCheck: (state, action) => {
      state.lastCheckPassed = checkValid(state, action.payload)
    }
  }
})

• 跨切片依赖、包含异步逻辑的场景
  如果校验逻辑需要读取其他切片的状态，或者包含接口请求这类异步步骤，推荐把逻辑放到thunk中处理（Redux Toolkit默认支持thunk，也可以用createAsyncThunk做封装），thunk提供的getState方法可以直接获取全量store状态：

export const runBoardCheck = createAsyncThunk(
  'board/runCheck',
  async (payload, { getState, dispatch }) => {
    const rootState = getState()
    // 可以按需读取任意切片的状态参与计算
    const checkResult = checkValid(rootState.board, rootState.permission, payload)
    dispatch(boardSlice.actions.updateCheckResult(checkResult))
    return checkResult
  }
)

业务逻辑收拢在slice文件的实践说明 #

把和状态处理直接相关的业务逻辑尽可能放在slice文件中，是Redux官方推荐的良好实践：

• 所有状态修改、状态相关的计算逻辑收拢在同一处，不需要在组件、零散工具文件里翻找状态变更的代码，长期维护成本更低
• 抽离出来的纯逻辑函数不依赖React上下文、store实例，写单元测试非常简单，传入固定参数就能直接断言输出结果
• 要注意边界：DOM操作、路由跳转、全局事件监听这类和状态修改无直接关联的副作用逻辑，不要塞进slice的reducer里，这类逻辑放到thunk、组件事件回调或者自定义中间件里处理更合适。

内容的提问来源于stack exchange，提问作者David Ho