P19:Redux进阶-React-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

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

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

安装完成后,删除一些没有必要的样式和代码,在/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>mybj</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'));

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

输出一个mybj的字样

虽然很丑,但是项目已经跑起来了。接下来我们编写一下render函数中的JSX页面(为了节省大家的时间,就不再使用antd了)。

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

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

Redux的安装和使用(复习)

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

npm install --save redux

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

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

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

const defalutState = {
    inputValue : 'mybj',
    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>
                    //-----关键代码--------start
                    <input value={this.state.inputValue} />
                    //-----关键代码--------end
                    <button>提交</button>
                </div>
                <ul>
                    <li>mybj</li>
                </ul>
            </div>
            );
    }
}

export default TodoList;

写完这段,到浏览器中保存看一下,应该就得到store中的值了,到目前为止,我们只是安装了React-Redux,但是还并没有进行使用,本文主要是把基本的环境搭建好和复习一下以前的知识。下篇文章我们再逐步学习React-Redux的知识,所以小伙伴们先不要着急,先把开发环境搭建好吧。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P19:Redux进阶-React-Redux介绍和安装

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发