Redux-学习笔记

太过爱你忘了你带给我的痛 2022-09-02 14:57 225阅读 0赞

### 文章目录 ###

*   *  Redux-学习笔记
     *   *  安装Redux
         *  Redux简介（为什么要用Redux?）
         *  Redux和React
         *  React-redux
         *  redux-actions使用
         *  项目打包

## Redux-学习笔记 ##

### 安装Redux ###

redux需要安装以下依赖：

cnpm install redux --save
    cnpm install react-redux --save
    cnpm install redux-actions --save

`@connect`装饰器报错处理  
因为用到了es6/7的语法，需要安装babel转码

npm run eject      //解除封装
    cnpm install babel-plugin-transform-decorators-legacy  --save-dev
    cnpm install  @babel/plugin-proposal-decorators --save-dev

在package.json中添加插件支持ES7：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

"babel": { 
        "presets": [
          "react-app"
        ],
        "plugins": [
          ["@babel/plugin-proposal-decorators",{ "legacy": true}]
        ]
      },

### Redux简介（为什么要用Redux?） ###

先来看看React里面的数据是怎样传递的（下图中并不是说this.state只能在“团长”处，这里只是为了简便，所以才这样写，其实营长，连长都可以有自己的this.state）：  
**React数据流：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

1.  可以看到，一般都是团长等高级干部商量好对策之后（`this.state`设置好）
2.  把命令一层层的传递下去执行（`this.props`渲染）
3.  要是哪里发生了什么新的敌情了（想更新页面内容了）
4.  就得一层层往上报告（通过回调一层层把数据传上去），此过程也必须一层层往上传递，不能越级，下面有解释
5.  团长做出决断后再发布命令传下去执行（通过`setState`修改数据并重新渲染）

这个过程是不能越级的，比如说你一连长发现了敌情就不能直接报告团长，而必须先报告给一营长，一营长再报告给团长，这里层级还不是特别深，你再来个排长，班长什么的，按照这种模式，等团长知道敌情，敌人都打到家门口啦，又或者说一连长想找三连长喝个酒，还得先把这个消息传给营长，再传给团长，再传给二营长再传给三连长，这……

**Redux横空出世**  
所以说层级不深，组价之间也没有什么公用数据的时候，用React自身的setState其实也可以了，可是嵌套一深，或者组件有一些公用数据时就比较麻烦了，于是就有了redux（其实之前还有个flux），回到这个例子就是，他们在整个团之外又建立了一个通讯班（Redux）：  
看起来就像下面这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
这里只是一个很简单的示意图，实际使用并非如此，这个图示为了让大家理解React中的数据和Redux中的数据是独立的，并没有任何关系。  
**Redux**  
现在让我们抛开战斗编制（React），单看通讯班（Redux）。  
其实网上讲Redux的教程非常多，这里就简单说一下：  
store  
`store`:首先要创建一个对象store，这个对象有各种方法，用来让外界获取Redux的数据（`store.getState`），或者让外界来修改Redux中的数据（`store.dispatch`）

import {  createStore } from 'redux';
    const store = createStore(reducer);

`action`:描述我要干啥，一般是一个对象的形式，其中有一个type字段是必须要有的，比如：`{ type：‘请求增援’ }`，还可以带点数据`{ type：‘请求增援’，gun:"100" }`

reducer  
`reducer`:撸开袖子真刀实枪的就去干了，比如一连长要求增援，增援要求是100杆枪，团长马上就给你加了100杆枪送了过去。

const defaultState = 0;
    const reducer = (state = defaultState, action) => { 
      switch (action.type) { 
        case '请求增援':
          return state + action.gun;
        default: 
          return state;
      }
    };

`action`和`reducer`也可以想象成`产品经理`和`程序员`的关系。  
产品经理：“我要一个按钮，圆角的”  
程序员：“嗯，做好了”  
产品经理：“换个颜色吧，红色”  
程序员：“ok，换好了”  
差不多就是这样，产品经理并不操心具体怎么实现的，他只说他想要干什么（`type`），然后再提点实现的要求（各种其他的数据），程序员就去具体实现（reducer，修改state，然后返回一个`全新的state`,这里注意我们并没有直接返回原来的state，我们返回的是一个全新的state对象，因为`reducer`函数是一个没有副作用的纯函数）

那怎么去触发这个操作（action）呢，就好比说我一连长发现敌情了，我怎么报告给通讯班，让通讯班来处理呢？

就是上面提到过的`store.dispatch`，不过还要加一个参数，那就是`action`

store.dispatch({  type：‘请求增援’，gun:"100" })

这样就可以触发action，执行reducer，得到一个全新的state。  
小例子：

<!DOCTYPE html>
    <html>
      <head>
        <title>REDUX</title>
        <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
      </head>
      <body>
        <div>
          <p>
            Clicked: <span id="value">0</span> times
            <button id="add">+</button>
            <button id="del">-</button>
          </p>
        </div>
        <script>
        window.onload = function(){ 
          const action = ()=>{ 
            return { 
              type:'DEL'
            }
          }
          const reducer = (state = 0, action) => {   //reducer
            switch (action.type) { 
              case 'ADD':
                return state + 1;
              case 'DEL':
                return state -1
            }
          };
          const store =Redux.createStore(reducer);   //创建store对象
    
          document.getElementById("add").onclick= function(){ 
            store.dispatch({  type:'ADD' })    //触发action
          };
          document.getElementById("del").onclick= function(){ 
            store.dispatch(action())    //触发action
          };
          function render(){ 
            document.getElementById("value").innerHTML = store.getState();  //获取store中的state
          }
          store.subscribe(render)  //监听state变化执行render
        }
         </script>
      </body>
    </html>

### Redux和React ###

到此为止，Redux自己就折腾完了，那么Redux自己的数据并没有用，它要把数据交给React用才行，接下来讲一讲怎么把数据交给React来用。  
上面我们创建了一个对象store，我们要把这个store对象作为props传给React，那React就可以用了。  
这个store只能有一个，也就只能创建一次，也就是说你必须在最顶层处创建一个store对象，然后再一层层的传递下去，才能让所有的组件都能获得这个store对象，调用它的方法。

**获取Redux中的数据**  
比如说我要在render函数中显示Redux的数据，那么我就可以先获取它的数据：

store.getState()

然后把这个数据当做props渲染到组件中去就行了。

**更新Redux中的数据**  
如果你要修改它的数据，那就在JSX中调用

store.dispatch( {  type：‘请求增援’，gun:"100" } )

**响应Redux中的变化**  
那么这里问题又来了，你调用了store.dispatch之后Redux中的数据确实改变了，可是React并没有什么变化啊。也就是说React中的render函数并没有被触发呀是不是，就好像React中你直接修改React中的state是没有用的而必须调用React的setState才能重新渲染。  
因此，为了让Redux的数据一改变我们就重新渲染，Redux自己提供了一个方法叫做

store.subscribe(render)

这个函数可以监听Redux中state的变化，一旦Redux中的state发生了变化，render函数就会被调用，页面就会被重新渲染。

上面这个过程就是手动调用的过程，但这样调用有点麻烦，因为要让所有的子组件都能应用store中的数据，那么所有的组件就都要把store当做props传进来，这也太麻烦了。  
还是那之前那个例子来说，你一连长发现了敌情，是不用层层上报了，可以直接报告给通讯班，通讯班再生成新的命令，可问题是，你从下往上打报告是简单了，可是从上往下发布命令仍然是一层层的传递的呀。  
就好比说，一连长发现了敌情，报告上去，通讯班做出决定让三连长带人去打，通讯班还是得通过团长–营长–连长这条路去一层层发布命令，能不能让通讯班直接就通知三连长呢，当然是有的，这就是我们的`React-redux库`

### React-redux ###

这个是需要你自己去用npm额外安装的。  
使用这个方法之后，我们就不需要一层层往下发布命令了  
在React-redux中有两个比较关键的概念：`Provider`和`connect`方法。  
一般我们都将顶层组件包裹在Provider组件之中，这样的话，所有组件就都可以在react-redux的控制之下了,但是`store必须作为参数放到Provider组件中去`

这个组件的目的是让所有组件都能够访问到Redux中的数据。

### redux-actions使用 ###

redux-actions有两大法宝`createAction`和`handleActions`  
**createAction**  
原来创建action:

const startAction = () => ({  type: START });

使用redux-actions创建action:

import {  createAction } from 'redux-actions';
    const startAction = createAction(START);

**handleActions**  
原来reducer操作state写法要使用switch或if else来匹配:

使用redux-actions\`\`reducer操作state:

const timer = handleActions({ 
      START: (state, action) => ({  ...state, runStatus: true }),
      STOP: (state, action) => ({  ...state, runStatus: false }),
      RESET: (state, action) => ({  ...state, seconds: 0 }),
      RUN_TIMER: (state, action) => ({  ...state, seconds: state.seconds + 1 }),
    }, defaultState);

### 项目打包 ###

`npm run build`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
打包成功后，新增build文件  
![在这里插入图片描述][ca82e6bf487e4770a8c2fef9719e9b21.png]  
如何访问？  
输入`npm install -g serve` 或者 `cnpm install -g serve` 安装服务，或者使用nginx，可见[https://blog.csdn.net/hhhmonkey/article/details/119333875][https_blog.csdn.net_hhhmonkey_article_details_119333875]类似  
![在这里插入图片描述][bdc2aafbb5c44f14bda5a9d016d8f871.png]  
进入build目录输入 `serve`  
![在这里插入图片描述][2b4b2806b59c424bbdb69f0ba8050697.png]  
在浏览器输入 `http://localhost:5000`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/2679bc4ccb3b4ce28f056bb5bc4865ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/c214a32c606f4d5daa63244be3402bea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/64aff485b6404c96b83d1ac25ef465ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/3f92912970df45d2b6451ba80d02820e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/716f48858aee429d84a345d062f4d88f.png
[ca82e6bf487e4770a8c2fef9719e9b21.png]: /images/20220829/3c7a19693e1a43e3a77375ffa524cf35.png
[https_blog.csdn.net_hhhmonkey_article_details_119333875]: https://blog.csdn.net/hhhmonkey/article/details/119333875
[bdc2aafbb5c44f14bda5a9d016d8f871.png]: /images/20220829/8fb4545027a84209a3f2cbdbdbaa5d73.png
[2b4b2806b59c424bbdb69f0ba8050697.png]: /images/20220829/9e51ecdc463e469aa9d62bc04de3df9b.png