@adamdickinson/react-service 中文文档教程

Question

React Service

应用程序的内部 API。

React 服务是对以下问题的一种回答：

我应该如何管理我的应用程序中的状态？ Redux 有很多样板文件并减慢了我们的速度，MobX 调试起来很棘手而且有点神奇，组件状态 + prop 钻孔很烦人并且增加了不必要的复杂性，React 上下文设置很烦人。 做什么？

Installation

npm install @adamdickinson/react-service

或者

yarn add @adamdickinson/react-service

API

只有一种方法是您真正需要了解的：

createService(hook) -> [ProviderComponent, UseServiceHook]

为新服务创建提供者和访问挂钩。

Parameters

hook

用于公开数据的 React 钩子函数。

Returns

[ProviderComponent, UseServiceHook]

很像React的useState方法，会返回两个值——定义 提供者组件和服务挂钩的定义。

提供者组件旨在在您的应用程序中呈现， 为所有子组件提供对已定义服务的访问。

服务挂钩旨在根据需要在子组件中使用 访问服务数据。

Usage

让我们停止讨论——现在是演示时间。 这里有一些方法可以 实现实际上是同一件事：

Basic Usage

作为一个人为的例子，假设我们想要提供随机数服务。

// 1. We define the service
const [RandomProvider, useRandom] = createService(({ max }: { max: number }) => {
  const [number, setNumber] = useState<number>()
  return {
    update: () => setNumber(Math.floor(Math.random() * max)),
    number,
  }
})

// 2. We use the service with the `useRandom` hook in some components
const Displayer = () => {
  const random = useRandom()
  if (!random) return null
  return <p>The number is {random.number}</p>
}

const Changer = () => {
  const random = useRandom()
  if (!random) return null
  return <button onClick={random.update}>Randomize!</button>
}

// 3. We expose the service to those components that use it by rendering a parent `RandomProvider` component
ReactDOM.render(
  <RandomProvider max={100}>
    <Displayer />
    <Changer />
  </RandomProvider>,
  document.getElementById('root')
)

Usage as an Auth Service

这是我们定义服务的方式。 我们从简明扼要地定义数据开始 和流程……

// src/services/auth.ts
import createService from '@adamdickinson/react-service'
import store from 'store'
import { useEffect, useState } from 'react'

// Define our contract
interface User {
  id: string
  firstName: string
  lastName: string
  email: string
}

interface AuthAPI {
  logIn(username: string, password: string): Promise<User>
  logOut(): void
  user?: User
}

// Define our API as a hook so we can leverage React functionality
const useAuthAPI = ({ serverUrl }: { serverUrl: string }) => {
  const [user, setUser] = useState<User>()

  const onChangeUser = (newUser?: User) => {
    // Set local state, and persist change to storage
    store.set('user', newUser)
    setUser(newUser)
  }

  useEffect(() => {
    // Restore existing user from persistent storage into local state
    const existingUser = store.get('user')
    if (existingUser) {
      setUser(existingUser)
    }
  }, [])

  const api: AuthAPI = {
    logIn: async (username: string, password: string) => {
      const response = await fetch(`${serverUrl}/login`)
      if (!response.ok) {
        throw new Error(response.statusText)
      }

      onChangeUser(await response.json())
    },
    logOut: () => onChangeUser(undefined),
    user,
  }

  return api
}

const [AuthService, useAuth] = createService<AuthAPI>(useAuthAPI)

export { AuthService, useAuth }

然后我们将它暴露给我们的应用程序……

// src/index.tsx
import ReactDOM from 'react-dom'
import App from './App'
import { AuthService } from './services/auth'

ReactDOM.render(
  <AuthService serverUrl="http://api.myapp.com">
    <App />
  </AuthService>,
  document.getElementById('root')
)

最后，在我们需要的地方开始使用它！

// src/App.tsx
import { useAuth } from './services/auth'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

export default () => {
  const auth = useAuth()
  return (
    <Router>
      <Switch>
        // Unauthed routes
        {!auth?.user && <Route path="/" component={LogIn} />}
        // Authed routes
        {!!auth?.user && <Route path="/" component={Welcome} />}
      </Switch>
    </Router>
  )
}

// src/containers/LogIn.tsx
import { useAuth } from './services/auth'
import { useState } from 'react'

export default () => {
  const auth = useAuth()
  const [loggingIn, setLoggingIn] = useState(false)
  const [error, setError] = useState('')

  const login = async () => {
    setLoggingIn(true)
    try {
      await auth.logIn('me', 'my-pass')
    } catch (error) {
      setError(error?.message || error)
      setLoggingIn(false)
    }
  }

  return (
    <>
      {error && <p>{error}</p>}
      <button onClick={login}>Log In</button>
    </>
  )
}

// src/containers/Welcome.tsx
import { useAuth } from './services/auth'

export default () => {
  const auth = useAuth()
  return `Welcome ${auth?.user?.firstName}!`
}

Limitations

任何好的图书馆都会确定它失败的地方以及它想要的地方 提升。 为了使它也成为一个好的库，这里有：

Too many services spoil the broth

一次使用多个服务会带来一些有趣的挑战：

1. Nesting Nightmares

看看这个（如果你敢的话）：

const App = ({ children }) => (
  <AuthProvider>
    <APIProvider>
      <CommentsProvider>
        <PlaylistProvider>{children}</PlaylistProvider>
      </CommentsProvider>
    </APIProvider>
  </AuthProvider>
)

它只使用四个随机命名的服务，但它已经成为一个嵌套的服务 混乱。

2. Inter-service Relationships

假设我们有一个使用 API 服务进行通信的 Auth 服务 它的代表，但 API 服务需要一个授权令牌。 很快，我们发现 我们有一个循环依赖。 有办法处理这个 - 即 将令牌关联的任务委托给调用者而不是让 API 服务本身将其与呼叫相关联，但这增加了更多的复杂性。

3. Performance Risks

虽然在我们广泛的实验中没有出现性能问题 这个库，当它们根本不存在时，存在运行额外渲染的风险 需要，同样由于服务的嵌套性质，但是更多的研究是 此处需要在任何实际程度上确认或否认这一点。

There ain't much structure

Redux 在其操作和 reducers 方面设定了标准流程。 这一切都是明确而冗长的。 虽然这通常被视为一种诅咒，但它可以 也是一种祝福，因为它还定义了许多开发人员可以使用的结构 同时。

样板文件很少，因此显式结构很少 对服务的要求。 虽然这确实意味着事半功倍 更少的代码，它也使事情变得不那么冗长和结构化。

Got more?

提出一个问题！

Got a solution?

启动 PR！ 标准很高，但反馈是任何标准的基石 好的 pull request 所以期待对任何贡献的热爱。