react-redux总结

redux是什么?

  redux是一种处理应用程序数据的方式。redux要求应用中只有一份数据state,state放在一个叫store的对象中,所有对数据的操作都要通过store来执行。react有三大原则:

  1.单一数据源:整个应用的state被储存在一棵object tree中,并且这个object tree只存在于唯一一个store中。

  2.state是只读的:唯一改变state的方法是触发action,action是一个描述已发生事件的普通对象。

  3.使用纯函数来执行修改:为了描述action如何改变object tree,需要编写纯函数reducers。

react和redux是什么关系?

  react和redux没有任何直接的关系,redux只是处理数据的方式,可以使用在react中也可以使用在其它任何地方。与react配合使用时可以使用react-redux库提供的方法来提高效率。

为什么要使用react-redux?

  react提供了很好的视图层的解决方案,但在数据的处理方式是没有提供有效的办法。使用react-redux可以采用redux思想在react应用中管理数据,同一根组件下的所有组件共享一份数据,

数据放在本组件树中唯一一个store对象中,所有对数据的操作都要通过store执行,通过使用connect创建的容器组件有了监听state变化和派发事件修改state的能力。这样就避免了子组件为了

获取数据需要数据层层传递的不便。

如何使用react-redux?

  react-redux库的开发思想是使容器组件和展示组件分离。展示组件描述界面如何展现,与redux无关,数据来源是父节点传入的props,修改数据通过props调用回调函数,展示组件由自己手

动创建。容器组件描述应用如何运行,使用redux提供的功能,数据来源是redux提供的state,修改数据是通过redux派发action,容器组件时通过react-redux提供的connect创建。在使用组件

搭建视图时不需要关心从何处获取数据,一切数据均通过this.props获取,所以可以做到组件的复用。视图搭建完成后使用connect方法创建容器组件来和数据交互,connect接收两个函数作为参数,

第一个mapStateToProps 定义了如何把stor中的state映射到展示组件的props中,第二个mapDispatchToProps 方法接收dispatch方法,然后返回期望注入到展示组件props中的回调函数,

在回调函数中可以使用dispatch派发action,从而修改state。connect函数返回一个函数接收一个展示组件作为参数,返回一个容器组件。connect函数内部创建了一个组件并在render方法中渲染

传入的展示组件,并通过context提供了访问store的能力,从而可以通过store实现获取、监听数据和派发action的能力。store通过redux包提供的createStore方法创建,createStore接收

reducer方法作为参数。reducer由我们自己来定义,reducer是一个存函数,接收state和action两个参数,功能仅仅是通过action来返回一个新的state,一定要是一个新的state,不允许在原state

上进行修改。redux包还提供了combineReducers方法来合并多个reducer函数返回一个传入createStore中的reducer,采用多个reducer函数可以分别管理对action的处理,但state有且仅有一份。

最后redux还提供了Provider组件,用于存放store对象,并通过context为子组件提供store对象,store以Provider的属性方式传递进去。

注意事项!!!

  state的更新可能是异步的,处于性能考虑react可能会把多个setState调用合并成一个调用。因为this.state和this.props的值可能会异步更新,所以不要依赖它们的值来更新下一个状态。

所以setState函数也可以传入一个函数作为参数,传入函数的第一个参数是上一个状态的state,第二个参数是本次组件更新时的props。参考:https://react.docschina.org/docs/state-and-lifecycle.html

这里有一个redux的简单实现https://www.cnblogs.com/ssw-men/p/10870569.html