江苏龙网

  1. 首页 > 资讯 > 科技 > >

InfoQ|为什么我不再用Redux了( 二 )

importaxiosfrom'axios'; caseSET_TODOS: return{ ...state,todos: action.payload }; default: returnstate; } }; exportconstApp ==>{ consttodos = useSelector((state) =>state.todos); constdispatch = useDispatch; useEffect(=>{ constfetchPosts =async => { const{ data } =awaitaxios.get("/api/todos"); dispatch({ type: SET_TODOS, payload: data} ); }; fetchPosts; }, ); return( <ul>{todos.length > 0 && todos.map((todo) =><li>{todo.text}</li>)}</ul> ); }; 请注意 ， 到这里甚至还没有开始处理重新获取、缓存和无效化 ， 只是加载数据并在加载时将其存储在全局存储中而已 。
下面是使用 React Query 实现的相同示例： importReactfrom"react"; import{ useQuery }from"react-query"; importaxiosfrom"axios"; constfetchTodos ==>{ const{ data } = axios.get("/api/todos"); returndata; }; constApp ==>{ const{ data } = useQuery("todos", fetchTodos); returndata ? ( <ul>{data.length > 0 && data.map((todo) =><li>{todo.text}</li>)}</ul> ) :null; }; 默认情况下 ， 上面的示例包括具有合理默认值的数据重新获取、缓存和过时内容无效化 。 你可以在全局级别设置缓存配置 ， 然后就可以忘掉它了——一般来说它足以完成你期望的工作 。 有关其幕后工作机制的更多信息 ， 请通过下方链接查看 React Query 文档 。 它有大量的配置选项可用 ， 本文只是介绍了一点皮毛 。
现在 ， 无论需要什么数据 ， 你都可以将 useQuery hook 与你设置的唯一键（在本例中为“todos”）一起使用 ， 并使用异步调用来获取数据 。 只要函数是异步的 ， 实现就无关紧要——你可以轻松地使用 Fetch API 代替 Axios 。
要更改后端状态时 ， React Query 提供了 useMutation hook 。
我还写了一份精选的 React Query 资源列表 ， 你可以在这里浏览 。
SWRSWR 在概念上与 React Query 几乎一致 。 React Query 和 SWR 大约是在同一时间开始开发的 ， 并且以积极的方式相互影响 。 在 react-query 文档中也对这两个库进行了彻底的比较 。
与 React Query 一样 ， SWR 也有真正可读的文档 。
在大多数情况下 ， 选择任何一个库都没什么问题 。 不管它们谁会在不久的将来成为事实规范 ， 从它们中重构都要比 Redux 那堆乱麻要简单许多 。
Apollo ClientSWR 和 React Query 专注于 REST API ， 但如果你在 GraphQL 上需要类似的东西 ， 就可以考虑 Apollo Client 。 令人欣慰的是 ， 它的语法与 React Query 几乎完全一样 。
前端状态呢一旦你开始使用这些库 ， 就会发现在绝大多数项目中 Redux 都太笨重了 。 处理完应用程序的数据获取 / 缓存部分后 ， 前端几乎没有全局状态可处理 。 可以使用 Context 或 useContext+useReducer 处理剩下的少量内容 ， 代替 Redux 的作用 。
或者更好的方法是 ， 使用 React 的内置状态作为你的简单前端状态 ， 这样做肯定没问题的 。// clean, beautiful, and simple


推荐阅读


上一篇：InfoQ|反 996 有理：催程序员交代码，写不出好软件

下一篇：新机发布|疑似小米CC10 Pro跑分曝光，或搭载高通骁龙865