前情提要

一般，在React应用中，经常会一起使用状态管理库和数据拉取库来实现相关的功能。比如说在React使用Redux Toolkit + SWR，实现的过程会相对繁琐些。

1. 使用Redux Toolkit中configureStore创建Redux store

2. 向React组件提供Redux store

3. 使用createSlice创建一个Redux slice

   1. 定义slice的name
   2. 初始化state 的value
   3. 添加reducer function来定义状态是如何更新的 （一旦slice被创建，我们需要export出整个slice的action and reducer）

4. 将slice Reducers添加到store中去

5. 在React组件中使用React-Redux useSelector/useDispatch

根据上面的步骤，当多个组件传递一个状态或者共享一个数据时，需要上面的步骤来完成。为了简化步骤，更好地让开发者关注在React应用逻辑，Spreado横空出世，Spreado使得状态和数据在React组件更加简单地传播。接下来，就让我们看看如何使用Spreado。

使用Spreado（ Redux Toolkit + SWR） 制作一个 Todo Demo

制作一个Todo Demo，需要实现的功能：

1. 获取当前未完成的Todo list
2. 添加新的Todo，并展示在Todo list中

在完成这个需求之前，首先了解下即将要使用到的Spreado的API：

• useSpreadOut / setSpreadOut ：将要共享的数据存储到Spreado中
• useSpreadIn ：获取Spreado存储的共享数据

Tips： 想要了解Spreado更多，请阅读文章Spreado - 轻松地在 React 组件间传播状态和数据

接下来，开始进入制作Demo之旅：

1. 首先使用create-app新建spreado-rt-swr-demo项目

   npx create-react-app spreado-rt-swr-demo --template typescript
   

2. 安装相关的包

   yarn install react-redux @reduxjs/toolkit spreado
   

3. 添加AddTodo组件和TodoList组件的UI

   

4. 实现数据交互

   1. 获取当前未完成的Todo，有两种方案：

      1. 直接在TodoList组件里使用useSWR获取数据

         

      2. 在useSWR的基础上，再结合Speado中useSpreadOut获取数据

         

      对比来看，似乎直接使用useSWR获取数据更加简单，看起来对于一个组件确实是这样的。不过，如果是多个组件呢，多个没有关系的组件需要共享unFinishedTodos数据时，如果还是只使用useSWR的话，要按照「1」中模式多写几遍。但如果使用第二种方案的话，直接在用到的组件里引用useUnFinishedTodoSpreadOut 即可。

   2. 添加新的Todo，并展示在Todo list中。当然也有两种方案：

      1. 根据上文提到的步骤直接使用Redux Toolkit添加新的Todo

         

      2. 使用Spreado里提供的API setSpreadOut添加新的Todo，使用useSpreadIn展示新添加的Todo

         

         两种方案对比，很明显的使用Spreado，过程更加简单。

到此，一个简单的Todo Demo「源码」制作好了。对比来看，使用Spreado时少了太多的模版代码，让开发者更加关注逻辑本身。

最后

共享某个状态/数据时，相比较于原生的Redux Toolkit更多的模版代码，Spreado像一个黑匣子，将Redux Toolkit、Swr封装，大大简化了实现过程。

为了更好的学习使用Spreado，可以学习GitHub repo react-easier/spreado，如果觉得小工具有帮助，请给 GitHub repo react-easier/spreado 点个 ⭐️，这也是我们不断前行的动力 😃✌ 。