P19:Redux进阶-React-Redux介绍和安装

客官°小女子只卖身不卖艺 2023-10-06 20:57 26阅读 0赞

#### Redux 进阶 ####

*  阐述
 *  React项目初始化
 *  安装 react-redux
 *   *  修改代码，让它跑起来
 *  Redux的安装和使用（复习）

## 阐述 ##

React-Redux是一个React生态中常用组件，它可以简化Redux流程，本文我们就重新建立一个项目Demo2，然后我们会用React-redux把之前的TodoList案例重新实现一遍。

当然，如果你公司不用这个插件，其实没必要耗费时间学。但是作为一篇文章，必须保证知识尽可能完整。（需要注意的是概念：`React、Redux、React-redux`是三个不同的东西）

## React项目初始化 ##

因为我以前已经安装了脚手架工具creat-react-app，所以现在直接在项目的终端中输入下面的命令。（如果你安装这个还不会，请看我react基础）

create-react-app demo02
    cd demo02
    npm start

经过上面的三个命令，应该可以在浏览器中出现下面的界面（出现画面说明我们项目初始化完成）。

![在这里插入图片描述][9d1c37b54df84da795398eb52513647f.gif_pic_center]  
安装完成后，删除一些没有必要的样式和代码，在 `/src` 目录下，只留一个 `index.js` 文件，其余的全部删除，这时候项目已经不能启动起来了，这很正常。

import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(<App />, document.getElementById('root'));

## 安装 react-redux ##

项目初始化好后，直接使用npm在命令行安装React-redux，这个网络的不同安装时间也有所不同。

npm install --save react-redux

### 修改代码，让它跑起来 ###

目前项目还是没办法跑起来的，需要建立一个 `TodoList.js` 的组件。  
项目代码如下:

import React, {
         Component } from 'react';
    class TodoList extends Component {
        
        render() {
         
            return ( <div>willem</div> );
        }
    }
    export default TodoList;

有了 `TodoList.js` 后，我们引入到 `index.js`文件下，然后修改代码如下:

import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList'
    ReactDOM.render(<TodoList />, document.getElementById('root'));

这时候在浏览器中预览，就会只输出一个 willem 的字样。

![在这里插入图片描述][5d08d9e270024de09272a20bd1f3952d.png]  
虽然很丑，但是项目已经跑起来了。  
接下来我们编写一下render函数中的JSX页面（为了节省大家的时间，就不再使用 `antd`了）。

`demo02\src\TodoList.js`

render() {
         
        return (
            <div>
                <div><input /><button>提交</button></div>
                <ul>
                    <li>willem</li>
                </ul>
            </div>
        );
    }

这时候界面应该发生了一点变化，这样基本的项目我们就算初始化完成了，接下来我们按原来的Redux方式作一个store出来。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]

## Redux的安装和使用（复习） ##

先在终端中安装Redux包，因为是一个新项目，所以需要重新安装。

npm install --save redux

首先创建一个store文件夹，在 `/store`下创建一个 `index.js` 文件,并写入下面代码：

`demo02\src\store\index.js`

import {
        createStore} from 'redux'
    import reducer from './reducer'
    
    const store = createStore(reducer)
    
    export default store

目前我们还没有reducer，所以我们要创建 `reducer.js`文件，代码如下:

const defalutState = {
        
        inputValue : 'willem',
        list :[]
    }
    
    export default (state = defalutState,action) =>{
        
        return state
    }

然后再 `TodoList.js` 中的构造函数 `constructor` 中使用。

import React, {
         Component } from 'react';
    
    //-----关键代码--------start
    import store from './store'
    //-----关键代码--------end
    
    class TodoList extends Component {
        
    
        //-----关键代码--------start
        constructor(props){
        
            super(props)
            this.state = store.getState()
        }
        //-----关键代码--------end
    
        render() {
         
            return (
                <div>
                    <div>
                        <input value={
        this.state.inputValue} />
                        <button>提交</button>
                    </div>
                    <ul>
                        <li>willem</li>
                    </ul>
                </div>
            );
        }
    }
    
    export default TodoList;

写完这段，到浏览器中保存看一下，应该就得到store中的值了，到目前为止，我们只是安装了React-Redux，但是还并没有进行使用，本文主要是把基本的环境搭建好和复习一下以前的知识。

下篇文章我们再逐步学习React-Redux的知识，所以小伙伴们先不要着急，先把开发环境搭建好吧。  
![在这里插入图片描述][2637e30020354ee9a926d35b3fd65a11.png]

[9d1c37b54df84da795398eb52513647f.gif_pic_center]: https://img-blog.csdnimg.cn/9d1c37b54df84da795398eb52513647f.gif#pic_center
[5d08d9e270024de09272a20bd1f3952d.png]: https://img-blog.csdnimg.cn/5d08d9e270024de09272a20bd1f3952d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c55229a4165742fc8b726907ea17f03f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_16,color_FFFFFF,t_70,g_se,x_16
[2637e30020354ee9a926d35b3fd65a11.png]: https://img-blog.csdnimg.cn/2637e30020354ee9a926d35b3fd65a11.png