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
经过上面的三个命令,应该可以在浏览器中出现下面的界面(出现画面说明我们项目初始化完成)。
安装完成后,删除一些没有必要的样式和代码,在/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
的字样。
虽然很丑,但是项目已经跑起来了。接下来我们编写一下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
的知识,所以小伙伴们先不要着急,先把开发环境搭建好吧。
码云笔记 » P19:Redux进阶-React-Redux介绍和安装