1.React-redux介绍及安装
React-Redux
这是一个React生态中常用组件,它可以简化Redux
流程(需要注意的是概念:React、Redux、React-redux是三个不同的东西)
1.1 项目初始化
create-react-app demo09-React-redux
cd demo09-React-redux
npm start
安装完成后,删除一些没有必要的样式和代码,在/src
目录下,只留一个index.js
文件,其余的全部删除。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
1.2 安装react-redux
npm install --save react-redux
1.3 修改代码,让他跑起来
创建一个TodoList.js
的组件。项目代码如下:
import React, { Component } from 'react';
class TodoList extends Component {
render() {
return ( <div>Karma</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'));
接下来编写一下render
函数中的JSX页面。
render() {
return (
<div>
<div><input /><button>提交</button></div>
<ul>
<li>Karma</li>
</ul>
</div>
);
}
接下来按原来的Redux
方式作一个store
出来。
1.4 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 : 'Karma',
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>Karma</li>
</ul>
</div>
);
}
}
export default TodoList;
到目前为止,只是安装了React-Redux
,但是还并没有进行使用。
2.React-redux中provider和connect
2.1 提供器Provider介绍
<Provider>
是一个提供器,只要使用了这个组件,组件里边的其它所有组件都可以使用store
了,这也是React-redux
的核心组件了。有了<Provider>
就可以把/src/index.js
改写成下面的代码样式。
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
//---------关键代码--------start
import { Provider } from 'react-redux'
import store from './store'
//声明一个App组件,然后这个组件用Provider进行包裹。
const App = (
<Provider store={store}>
<TodoList />
</Provider>
)
//---------关键代码--------end
ReactDOM.render(App, document.getElementById('root'));
写完这个,去浏览器中进行查看,发现代码也是可以完美运行的。需要注意的是,现在还是用传统方法获取的store
中的数据。有了Provider
再获取数据就没有那么麻烦了。
2.2 connect
连接器的使用
打开TodoList.js
文件,引入connect
,它是一个连接器(其实它就是一个方法),有了这个连接器就很容易的获得数据了。
import {connect} from 'react-redux' //引入连接器
这时候暴露出去的就变成了connect
了,代码如下。
export default connect(xxx,null)(TodoList);
这里的xxx
代表一个映射关系,目前还没有制作这个映射关系。
2.3 映射关系的制作
映射关系就是把原来的state映射成组件中的props
属性,比如我们想映射inputValue
就可以写成如下代码。
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}
这时候再把xxx
改为stateToProps
export default connect(stateToProps,null)(TodoList)
然后把<input>
里的state
标签,改为props
,代码如下:
<input value={this.props.inputValue} />
TodoList.js
的所有代码。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} />
<button>提交</button>
</div>
<ul>
<li>JSPang</li>
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}
export default connect(stateToProps,null)(TodoList);
3.React-redux的数据修改
3.1 编写onChange
响应事件
打开TodoList.js
文件,然后在<button>
上加上onChange
事件。
<input value={this.props.inputValue} onChange={this.inputChange.bind(this)} />
有了事件需要编写对应的方法,这里先写一个最简单的inputChange
方法。
inputChange(e){
console.log(e.target.value)
}
然后到浏览器中的控制台就不再有报错,而且输入时可以打印出值。
3.2 编写DispatchToProps
要使用react-redux
,可以编写另一个映射DispatchToProps
,先看下面这段代码,你会发现有两个参数,第二个参数我们用的是null
。
export default connect(stateToProps,null)(TodoList);
DispatchToProps
就是要传递的第二个参数,通过这个参数才能改变store
中的值。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
console.log(e.target.value)
}
}
}
有了这个参数之后就可以把响应事件改成下面的代码.
<input value={this.props.inputValue} onChange={this.props.inputChange} />
然后把connect第二个参数传递过去。
export default connect(stateToProps,dispatchToProps)(TodoList);
这时候原来的inputChange
方法就没用了,可以删除掉。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.inputChange} />
<button>提交</button>
</div>
<ul>
<li>Karma</li>
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
console.log(e.target.value)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);
3.3 派发action
到store中
映射关系已经做好了,接下来只要进行action
的派发和reducer
对业务逻辑的编写就可以了。派发action和以前的流程一样。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
}
}
}
派发后就需求在reducer
里边,编写对应的业务逻辑了。
const defalutState = {
inputValue : 'jspang',
list :[]
}
export default (state = defalutState,action) =>{
if(action.type === 'change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
return state
}
4.React-redux增加List数据
4.1 给按钮增加点击事件
直接在/src/TodoList.js
里的Button
增加一个onClick
事件,代码如下:
<button onClick={this.props.clickButton}>提交</button>
注意这里依然使用的props
,也就是说还需要把方法写在dispatchToProps
里。我们这里先写一个测试,看看是否绑定上了。
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
console.log('test')
}
}
}
写完clickButton
方法后,在浏览器中预览,打开浏览器的控制台看一下结果,应该在点击时,可以看到显示test。 这步完成,就是用dispatch
派发action
了。
clickButton(){
let action = { type:'add_item' }
dispatch(action)
}
4.2 编写Reducer
的业务逻辑
派发完成后,到Reducer
编写业务逻辑,这一步和以前的操作基本一样。
const defalutState = {
inputValue : 'karma',
list :[]
}
export default (state = defalutState,action) =>{
if(action.type === 'change_input'){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
//----关键代码------start---------
if(action.type === 'add_item'){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
//----关键代码------end---------
return state
}
4.3 页面UI部分的制作
然后到TodoList.js中进行
JSX部分的编写,编写前需要先把
stateToProps`的映射关系做好。
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}
有了映射关系,就可以再界面中用属性的方式,进行显示,代码如下:
<ul>
{
this.props.list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
这样就实现了增加TodoList
的列表项。
import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'
class TodoList extends Component {
constructor(props){
super(props)
this.state = store.getState()
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.inputChange} />
<button onClick={this.props.clickButton}>提交</button>
</div>
<ul>
{
this.props.list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type:'add_item'
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);
5.React-redux程序优化
5.1 用结构复制精简代码
现在代码中有好几处this.props
都是重复的,这时候就可以用javascript
的解构赋值方法,来精简代码。修改TodoList.js
中的Render
函数,把原来带代码修改为下面的代码:
render() {
let {inputValue ,inputChange,clickButton,list} = this.props;
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
5.2 把TodoList
改为UI组件-提高性能
可以看到,现在的TodoList
组件里没有任何的业务逻辑,只有一个Render
方法,这时候就可以把它改为UI组件(无状态组件),UI组件就是一个方法,减少很多冗余操作,从而提高程序运行性能。这时候重新声明一个TodoList
的变量,然后把render函数里的东西复制过来,只要稍加修改,就可以得到下面的代码:
const TodoList =(props)=>{
let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后,此处要进行修改
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
代码写完后,我们删除一些不用的引入,然后就可以到浏览器中进行预览了。
import React from 'react';
import {connect} from 'react-redux'
TodoList.js
的所有代码。
import React from 'react';
import {connect} from 'react-redux'
const TodoList =(props)=>{
let {inputValue ,inputChange,clickButton,list} = props; // 粘贴过来后,此处要进行修改
return (
<div>
<div>
<input value={inputValue} onChange={inputChange} />
<button onClick={clickButton}>提交</button>
</div>
<ul>
{
list.map((item,index)=>{
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
);
}
const stateToProps = (state)=>{
return {
inputValue : state.inputValue,
list:state.list
}
}
const dispatchToProps = (dispatch) =>{
return {
inputChange(e){
let action = {
type:'change_input',
value:e.target.value
}
dispatch(action)
},
clickButton(){
let action = {
type:'add_item'
}
dispatch(action)
}
}
}
export default connect(stateToProps,dispatchToProps)(TodoList);
然后,再来理解一下最后一句话代码的意思。
export default connect(stateToProps,dispatchToProps)(TodoList);
connect
的作用是把UI组件(无状态组件)和业务逻辑代码的分开,然后通过connect再链接到一起,让代码更加清晰和易于维护。这也是React-Redux
最大的优点。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!