redux 是 JavaScript 状态容器,提供可预测化的状态管理。 可以用在React、Vue等前端库中。
react-redux是react中的redux插件,简化了redux的用法,使开发者更方便地使用redux来管理状态。
为什么要有redux?
我们知道,react中的数据流是单项传递的,即状态只能从父组件传递给子组件,虽然可以用ref在父调中调用子组件的方法从而返回子组件的状态给父组件使用、或者使用context跨级传递属性等方法,但是当组件很多而且都需要共享一个属性的时候,那些方法管理属性就显得不规范且不方便,因此,需要使用redux这个专门的状态容器来统一管理状态。
从执行npm start后渲染页面的角度解释:
当页面第一次渲染的之前,store.js中的createStore()函数就根据参数reducers创建了store对象,并且reduceers中的默认返回值就是store对象需要管理的状态以及状态初始值。然后页面调用getState()获取到状态,值获取完毕后进行页面渲染。当用户点击按钮的时候,就会将不同的action传递给dispatch,一旦调用dispatch,就会触发reducer中的函数调用,改变状态之后,将新的状态传递给store,store接受到新的状态之后就会去调用subscribe中的回调函数,重新render。
redux的三个关键函数:getState()、subscribe()、dispatch()
getState() :用于获取当前最新的状态
subscribe() :用于订阅监听当前状态的变化,然后促使页面重新渲染
dispatch() :用于发布最新的状态