重学React：应用规模化之状态管理

,小羊们好！我们通过TodoMVC的例子掌握了React的很多核心知识点，搞一个小应用不成问题，但是，但凡上点规模的应用都会需要状态管理和路由。所以，我们将继续升级TodoMVC，引入这两个关键需求，使大家可以通过这个过程掌握规模化React应用中如何用好状态管理和路由功能。,我们将学到如下核心知识点：,现在react社区中的状态管理库有一打那么多，随便说几个：,看完这些之后，大家很容易做选择：,想要大众稳定一点，redux，mobx,现在我们来看一下前面的案例中一些比较别扭的地方：,TodoList传递很多属性和方法比较冗长：,visibility，setVisibility明显是TodoFilter内部状态，现在因为过滤结果要传给TodoList而不得不写在外面：,如果提取新增功能到独立组件里也会遇到同样的问题：操作的是todos，关心的却是TodoList，很不好写吧？,,我们期待的​​App.jsx​​应该是这样的：简单组合，组件之间又可以轻松共享数据和通信。,在组件内部，也应该很容易取到想要的数据和方法，比如TodoList：,像上面这样的需求，通过redux这样的同一状态管理库就可以很容易实现，下面我们来看一下具体做法。,以前我使用redux需要安装：redux + react-redux。痛点是概念多，代码复杂冗长，心智负担严重。,现在官方推出了Redux Toolkit，以下简称RTK，我们可以使用RTK + react-redux 组合。,RTK主要用来简化和优化redux代码。使用它可以轻松实现模块化和可变数据写法，简直不要太好用，这也是我改变最初准备使用mobx给大家演示的原因！,下面我们引入RTK 和 react-redux：,我想要快速尝试一下，store/index.js：创建Store实例，用来存储状态,再看看counterSlice中的reducer定义部分：createSlice({...})定义子模块，这样可以很容易拆分代码,下面是在主文件中设置store，main.jsx：,这就准备好了，下面在组件中使用数据：,看看效果吧！,,下面我们着手重构​​TodoMVC​​​，首先将todos数据和操作移入独立的​​todoSlice.js​​：,现在我们不再需要在app.jsx中声明todos，也不需要给TodoList传递数据：,todos发生变化持久化到localStorage可以先注释掉，随后我们通过中间件的方式写到todoSlice中,我们再重构一下TodoList.jsx：,我们再提取新增组件感受一下变化，创建一个AddTodo.jsx：,下面修改过滤组件FilterTodo的实现：这里需要提取visibility这个状态到全局，因为修改组件是FilterTodo，关心它的却是TodoList，创建visibilitySlice.js：,注册slice，store/index.js,修改FilterTodo.jsx：可以看到FilterTodo通过dispatch()方式设置visibility。,现在App.jsx中不在需要visibility状态，也不需要传递他们给FilterTodo,下面我们看一下visibility发生变化之后，todoSlice中如何做出响应：我们添加一个selectFilteredTodos选择器,TodoList中只需要替换selectTodos为selectFilteredTodos即可：,大家看这像不像Vue中的计算属性，或者Vuex中的getters，那既然要像，就要彻底一些，因此最好引入缓存性，即：todos和visibility不变化就没有必要重新过滤。,这就需要用到RTK提供的createSelector方法，它的前身就是reselect，来看看具体用法：,全部搞定！现在再看看App.jsx，已经短小到不能再精悍了！,还有最后一件事，就是todos信息变化之后要存入localStorage。,之前我们通过观察todos变化触发保存行为：这需要我们在App中额外引入todos，破坏了App短小精悍的感觉,实际上，我们可以利用redux中间件完成这个需求，store/index.js：,终于写完了！掌握了好多redux知识，但我们还是不满足：,这些功能我们会在后面的教程中带大家逐步实现，顺便，我们再学一下路由库的使用。