redux以及react-redux

         1.redux案例完整版

        上一篇文章我们是没有action文件，直接在countre组件与store以及reducer直接进行状态的改变以及展示。

        下面我们加上action文件，我们就不能直接通过dispatch传，而是通过调用action里面的函数讲我们传入的参数变成action这种对象形式然后dispatch传递给store。

        

        data是我们传入的参数，返回值是action对象的形式。这里我们一直写type可能会拼错，我们也可以定义一个常量文件，去给type重新定义一个常量保存，比如全大写，这样保证不会拼错。

        这是是引入的store之后，store.dispatch（createIncrementAction（value*1））这种里面是通过action函数变为action格式，然后外面dispatch直接扔到store，然后store调用的reducer开始按照里面的action加工状态。状态被改变之后通过store.getState（）直接获取状态展示到页面上。

       现在我们正式开始react-redux。

   2.react-redux

                

        这里是react-redux的流程图，相当于封装了redux，让我们更加直观的用react-redux库来更好的使用redux。

        现在我们先实现容器组件和ui组件的连接。

        

        先创造容器组件Count在container文件夹，里面引入我们的react-redux库里面的connect，以及子组件Count,然后连接起来暴露Count组件。我们通过react-redux的connect方法，connect（）（）第二个括号是我们要连接的ui组件，第一个括号是我们给ui组件传递的props。

        

        然后我们容器组件在App组件之中引入并且渲染，然后传入store方法。通过props。

        这里的子组件只是于容器组件进行传输数据，不和redux有任何关系，所以store的一切删除掉。

        现在我们完成了连接子组件和容器组件，并且给容器组件传了store。

  3.react-redux的基本使用

        我们通过props在App组件调用Count组件的时候传了store。

        现在我们在控制台看组件的关系。

        

        Count组件是容器组件Count的子组件。所以props传递就说的通了。

        

        但是我们在括号里面连接的子组件，我们应该怎么去传props呢？connect的第一个括号。

        这里封装好的方法是connect里面的参数是函数，我们通过函数的返回值来传，如下图，注意返回值和props接收的格式都是key：value组合，一共有2个函数参数，第一个返回的是redux保存的状态，第二个返回的是操作状态的方法。

        

         这里第一个函数参数是封装的react-redux自动给我们执行store.getstate()放这里下面的dispatch同理。然后我们在这里设置了状态以及方法，都是key value的写法。我们传props给子组件

         我们在第一个函数返回的参数中返回的是一个对象，值是state，当前我们的state只有一个是数字0，所以直接这样给count这个key赋值就可以了，第二个函数，是传递的方法，比如当我们调用jia的时候，我们传一个参数value，然后通过createIncrementType生成对应的加的action，然后dispatch发送给store，再给到reducer加工，然后前面的state更新，这样就实现了整个加的过程。

        

        传了参数就可以直接调用，调用之后会执行dispatch送里面的action到store连接的reducer加工。而且可以简写，把第二个函数props当成对象来写，这样也会自动识别，react-redux库会自动识别。

        

        这样很简洁，虽然可读性我认为不高。写成这种对象，keyvalue，只需要写成action，react-redux就可以帮我们dispatch，也就是react-redux帮我们识别如果是对象就直接dispatch。

        而且我们用了connect连接redux之后，不需要subscribe监听状态的变化。容器组件帮我们监听使用。也就是说用了react-redux库就自动帮我们监测状态变化去刷新页面。

        

        当我们用Count容器组件的时候我们需要传store，但是每次都需要传，如果有很多容器组件就很麻烦。这时候我们可以用react-redux的一个provider api。

        

        这样就可以自动给容器组件传入store。

        优化文件。这时候文件太多，我们可以直接把count ui组件直接写到容器组件里面，这样就可以很方便的去看了，也就是ui组件不需要暴露或者引入，直接写道容器组件就可以了。

        

        

        就把ui组件以及他的容器组件写到一起。

 4.react-redux案例实现，数据共享。

        我们上面的案例，只是走通了流程，我们在reducer里面初始化一个state，然后定义了加工的方法，在action里面定义了传参数改变成action对象的形式，用react-redux里面的connect帮我们调用store里面的api，store文件定义了一个srore。我们只是实现了操作reducer里面的state并且拿过来使用。我们是直接把初始化的0当作共享的状态了

        如果我们现在创建一个新组件person，person组件可以从redux拿到count组件当前的和的值，count组件可以拿到rudex里面存的person组件的关于人的数据

        首先就需要去创建person组件对应的action以及reducer文件，这里我们需要创建文件夹专门存放action以及reducer。

        

       

        这里我们Person对应的reducer和action写好了。

        但是现在我们有两个reducer，那么我们的store就需要改一改了。

        

        这里用到的api是固定格式，需要记住。合并2个reducer为一个对象，里面都是函数，这样rens就是person的reducer，he就是count的reducer，这时候注意thunk，因为我们的store不能接受函数，只能接受一般对象，这里的中间件applyMiddleware（thunk）帮我们执行函数拿到返回值是一个对象，就可以了。

        

        

        然后我们的person文件就可以去connect创造容器组件，以及连接ui组件之后，传过来我们在reducer初始化设置的数组对象，以及action文件中创建的生成对应type的action的函数，调用传入我们的对象参数就可以自动变成对应的action了，然后这里我们是简写，react-redux库会自动识别对象然后帮我们dispatch给store连接的reducer上加工，然后更新state。

        这样我们的共享状态流程就通了，只需要用解构赋值通过props调用通过解构拿过来的状态就可以了，展示出来就行了。

        流程是这样的，还是比较繁琐的，但是代码并不难，需要去多练习。