今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章:
对于基础部分我在这里稍微讲解一下首先我们要知道我们为什么要使用Redux,我们在什么情况下才需要去使用Redux,在这里引用Redux的创造者的一句话:"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"
结合项目经验说下我自己的理解:如果这批数据只是在一个组件使用并且不需要和别的组件进行数据共享,从单一来源获取数据的时候,也就是说你的UI层很简单,没有复杂的数据流动,总之就是加入数据流动单项并且很简易,没有与服务器的大量交互的情况下,我们不需要使用Redux,否则只会让我们的开发变得更加复杂。
那么什么时候我们需要用到Redux呢:比如你的数据流动很复杂,这批数据有多个组件需要使用甚至别的页面也需要使用它,或者说就是你的某些状态需要在多个没有强关联的组件中用到,举个很常见的例子,就比如说我们做登录保存用户信息或者是做购物车的时候,我们就很有必要引入Redux来帮我们做状态管理了,总之,就是在你某些状态或者数据的很难控制很难传递的时候,你需要Redux来帮助你。
参照这张经典图来讲解一下Redux的工作原理
组件Component通过ActionCreators派发一个行为action(注意在这里是派发一个扁平对象),这个行为被派发到了Store,Store借助Reducer确认该State的状态并执行相应的操作,接下来Reducer把新的State返回给Store,最后Store把这个State转给了Component。
假如说你已经在你使用Redux做过一些小demo了,我讲一下在项目中的一个Redux进阶用法,我就根据上面讲的Redux的工作流程,结合伪代码给大家讲解一下在项目中我们应该如何去使用它(建议把这段伪代码通读几遍,因为本人写的前后顺序排的不是很合理,但是通读下来几遍的话,相信你能理解的): 第一步:我们要在最外面注册一个Store
import { createStore, applyMiddleware } from 'redux' //applyMiddleware作用是提供一个中间件,关于Redux中中间件的理解大家可以去官网看一下,很有用处,链接地址: import thunk from 'redux-thunk' //可以让dispatch传的内容就不会局限于只能传一个扁平对象了,就可以传一个函数了,关于redux-thunk的话后期我给大家写一个它源码的解析,最近太累了,感兴趣的伙伴先自己查查 import reducers from './reducers' const store = createStore(reducers,applyMiddleware(thunk)) export default store