Redux 和 React-redux

题外话:
这只是一篇入门的文章而已,如果这些您已经会了,请跳过此章节。

自从学习了React之后,感觉在坑里出不来了,我觉得React真是一个巨坑,巨坑!如果想要使用React,单单使用React也可以,但是总感觉不对劲!发挥不出来React的真正作用!在开发的时候也体验不到那种流畅的感觉!所以我们得学习配套的一系列的东西,俗称 “React全家桶”

React的语法,可以用jsx的语法,也可以用ES6的语法,这个就看个人喜好了。而且在使用React的时候,一定要注意版本号,不同版本下面的API也是有很大区别的,甚至在有些版本里已经废弃了很多API。当你遇见一个问题解决不了的时候,回头看看版本号,没准就豁然开朗了!让你用React遇见解决不了的状态问题的时候,你可能需要使用Redux了!还有,尽量去官网或者GitHub上面去寻找第一手的答案。不要怕英文,看的多了自然你就慢慢融入进去了,否则 只能永远吃别人翻译过的!

Redux介绍:
Redux是用来管理状态的,比如我们需要服务器的返回值,或者localStore的存储数据,也或者是各种标签切换的状态,当状态非常多的时候,我们不确定到底是哪个状态引起了应用的错误,这个时候我们使用Redux可以轻松的查看state的变化状态!让所有问题变得都可以预测。

三大原则:
1,单一数据源。也就是整个应用中只有一个store,这个store中存储state的信息

2,state的状态是只读的,不能直接修改的,唯一修改state的方式就是通过action的方式

3,使用纯函数来进行修改,纯函数就是输入相同,输出相同。

Redux组成
1,Action:action就是数据载体!也就是相当于一个数据包!action中必须存在一个type属性,这个type属性表明要执行的动作!同时这个action也是store的唯一数据来源!如果想要修改store中state的数据。

例如:定义一个普通的action


const  Action = {

         type:"ADD",

         todo:"Go Home"

}

可以通过:


store.dispatch( Action )  这样就是相当于向store发送数据

2,Reducer

Action只是要发送给store的数据包,但是并没有进行数据处理!所以数据在发送到store的时候,需要被reducer进行处理。

reducer是一个纯函数,接收两个参数 一个旧的state,一个action。返回一个新的state!!reducer中绝对不能进行以下三种操作

reducer也是createStore中的参数


let Store = createStore( reducer );

1,修改传入的参数,也就是说reducer中这两个参数是固定的,旧的state,和action 。

2,执行有副作用的操作,比如各种请求啊,跳转啊等等!

3,不要执行非纯函数。(至于什么是非纯函数,我理解的就是返回值不确定的这种。比如Math.random() )
在这里着重强调一下: reducer 函数中state参数! 我们都知道reducer接收一个旧的state,返回一个新的state, 那么这个旧的state是整个应用的state还是reuder对应的那一段state呢? 我之前在阅读文档的时候这段非常疑惑,如果每次接收的是整个应用的state,如果一个应用的state层级非常的深!那么这是非常消耗性能的! 但是等我又阅读文档的时候我发现 这个state其实只是reducer处理的对应的state。并不是全局state;但是返回的时候必须返回一个全新的state,也就是说,这其中我们是有一个合并操作! 把reducer处理的那部分state 同全局state进行了一个对比,把同全局state差异化的地方进行了合并!


var globalState = {

name:"Tom",

age:20,

add:"BJ"

LikeGirl:[ '安吉娜朱丽叶' , '唐嫣' , ' 凤姐 ' ] ;

}

/****定义修改LikeGirl数据****/

const LikeGirl = {

        type:"changeLikeGirl ",

        arr: '郭德纲' 

}

var initState = { LikeGirl :[] }

function Reducer(state , action )

       switch ( action.type ){

                case "changeLikeGirl" : 

                     return {

                            LikeGirl : [...globalState . LikeGirl  , action.arr ] 

                     }

       }

在上面的代码中,定义了一个全局state , 然后发送一个LikeGirl的action ,在这个action中,携带了一个arr属性,这个值是我们准备合并到全局state中的值。 通过定义的type字段,来执行不同的动作,最后返回一个新的全局state,这个全局state中就包含了action中携带的值!

3,store

store就是一个大仓库,仓库中存储这一个state,state中包含各种各样的数据

store定义了几种方法

store.dispatch ()通过这个方法,向store中发送action

store.getState() 通过这个方法可以获取store中state的信息

store.subscribe( listener ) 给store设置监听事件,当store中的state发生改变的时候,就会触发回调函数。

store.subscrbie( listener ) 这个返回值来取消监听事件!

4,数据流

Redux中执行严格的单向数据流动。

Redux中应用数据的声明周期遵循下面4个步骤。

1,调用store.dispatch( action )

这个回调函数可以在任何地方进行调用,比如组件,XHR,定时器!

2,Redux中调用传入的reducer函数。

3,根reducer应该把多个子reducer输出合并到一个单一的state树

4,Redux Store中保存了根reducer 返回的完整的state树!

React-redux
如果想要React 和 Redux 一起使用 ,需要使用react-redux这个绑定库。

在这个绑定库当中,提供了2个重要的内容 一个是Provider,一个是connect()




       



使用Provider来包裹我们的组件,这样默认在所有组件内部都可以使用store中的数据

connect这个方法是重中之重!这个方法接收4个参数。

connect ( mapStateToProps , mapDispatchToProps , merProp ,options)

mapStateTopProps:这个函数接受一个参数state,返回一个对象。把state中返回对象的key当做props传递到组件中,这样在组件内部可以通过this.props[key]来获取到对应的值。

这个方法也叫输入方法,通俗的说也就是将state映射到UI上的数据

mapDispatchToProps:这个方法也叫做输出方法,将用户的操作转换成action对象,传递到store中!

也就是将用户对UI的操作映射为action,用来建立UI组件的参数到store.dispatch方法的映射!

你可能感兴趣的:(Redux 和 React-redux)