Redux解决了什么问题？是如何工作的？

来源：千锋教育

发布人：qyf

时间： 2023-02-14 17:22:46

　　React框架这样的纯视图的框架对组件通信、状态共享等方面没有太好的解决方案，只能利用状态提升、context之类的技术方案来解决，但是当组件结构、数据流向都比较复杂的时候，React本身的Api解决这样的问题就有些吃力。

　　此时就可以使用Flux、Redux这样的架构方式来解决问题。

　　我们之前的项目就在使用Redux，后来又有了rtk，让redux在react组件中的使用更加方便，在一些小型的项目，或者一些小模块中，利用useReducerHook来进行state与dispatch的构建，也能快速优雅的解决问题。

　　之前的原生Redux中，真实项目开发中，往往需要搭配redux-thunk来进行异步action处理，以及react-redux来进行组件与store的连接，如果不使用react-redux的话，会比较繁琐。

　　redux的结构分为store、Views、Actions、Reducer。

　　Store中存储的状态在视图中可以通过getState来获取，也可以通过subscribe方法进行监听，当视图产生UI操作的时候，可以调用actions的方法来生成action后，利用dispatch方法进行派发，此时reducer就会被调用，并且接收到当前的状态与action对象，经过计算出，返回新状态，Store就会进行状态的更新。

　　利用react-redux后，组件可以通过connect搭配mapStateToProps及mapDispatchToProps参数来获取store中的状态及actions中的方法。

　　使用RTK之后，创建reducer更近方便，利用useSelector和useDispatch可以更快更高效取用状态及派发action。

　　对于一个小的场景，比如之前我做的注册模块有三个步骤，每个步骤都需要用到第一步用户填写的手机号等信息，这样就形成了几个小组件间的状态共享，如果使用父组件状态提升会导致数据流向不清晰，也犯不上使用redux-store进行存储，于是就是使用useReducer快速的创建了一个小的store，内部集成了state与dispatch，搭配Context，也能很高效的解决问题。

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。