react学习笔记-UI组件、容器组件、Redux进阶（7）
2019-07-08 本文已影响0人
wayne1125
6-1、UI组件和容器组件
- UI组件：负责页面渲染
- 容器组件：处理页面逻辑
// TodoList.js 容器组件
render(){
return (
<Fragment>
<TodoListUI
inputValue={this.state.inputValue}
list={this.state.list}
handleInputChange={this.handleInputChange}
handleStoreChange={this.handleStoreChange}
handleButtonClick={this.handleButtonClick}
handleItemDelete={this.handleItemDelete}
/>
</Fragment>
)
}
// TodoListUI.js UI组件
import React, { Component } from 'react'
import { Input,Button,List } from 'antd'
class TodoListUI extends Component {
render () {
return (
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input
value={this.props.inputValue}
style={{width: '300px',marginRight: '10px'}}
placeholder="todo info"
onChange={this.props.handleInputChange}
/>
<Button type="primary" onClick={this.props.handleButtonClick}>提交</Button>
<List
style={{margin: '10px 0',width: '300px'}}
bordered
dataSource={this.props.list}
renderItem={(item,index) => <List.Item onClick={(index) => {this.props.handleItemDelete(index)}}>{item}</List.Item>}
/>
</div>
)
}
}
export default TodoListUI
6-2、无状态组件
- 一个普通组件只有render的时候，可以用一个无状态组件替换该组件
- 6-1中的UI组件可用无状态组件替换
- 一般UI组件（负责页面渲染）可用无状态组件替换
优点：
无状态组件是一个函数（性能高）
普通组件是一个类（类中会有生命周期函数等）
// 无状态组件
const TodoListUI = (props) => {
return (
<div style={{marginTop: '10px',marginLeft: '10px'}}>
<Input
value={props.inputValue}
style={{width: '300px',marginRight: '10px'}}
placeholder="todo info"
onChange={props.handleInputChange}
/>
<Button type="primary" onClick={props.handleButtonClick}>提交</Button>
<List
style={{margin: '10px 0',width: '300px'}}
bordered
dataSource={props.list}
renderItem={(item,index) => <List.Item onClick={(index) => {props.handleItemDelete(index)}}>{item}</List.Item>}
/>
</div>
)
}
6-3、Redux中发送异步请求获取数据
- 使用Charles软件mock数据
componentDidMount () {
axios.get('/api/todolist').then((res) => {
console.log(res.data)
const data = res.data
const action = initListAction(data)
store.dispatch(action)
}).catch(() => {
})
}
6-4、使用Redux-thunk中间件实现ajax数据请求
- npm install redux-thunk // 安装redux-thunk中间件
参考：https://github.com/reduxjs/redux-thunk - redux-devTools配合redux-thunk配置
参考https://github.com/zalmoxisus/redux-devtools-extension
中1.2 Advanced store setup高级配置 - 修改配置
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk)
);
const store = createStore(reducer, enhancer)
export default store
// TodoList.js中内容修改
componentDidMount () {
const action = getTodoList()
store.dispatch(action)
}
// src/store/actionCreator.js
// 使用redux-thunk后
export const getTodoList = () => {
return (dispatch) => {
axios.get('/api/todolist').then((res) => {
console.log(res.data)
const data = res.data
const action = initListAction(data)
dispatch(action)
}).catch(() => {
})
}
}
6-5、什么是Redux的中间件
- 中间件是指action和store之间，实际就是对dispatch进行一个封装
- 把异步操作放到action中处理
-
有助于做自动化测试
image.png
6-6、6-7Redux-sage中间件入门
- npm install --save redux-saga // redux-saga安装
参考：https://github.com/redux-saga/redux-saga
// src/store/index.js
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
// import thunk from 'redux-thunk'
import createSagaMiddleware from 'redux-saga'
import todoSagas from './sagas'
const sagaMiddleware = createSagaMiddleware()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
// applyMiddleware(thunk)， // 使用redux-thunk
applyMiddleware(sagaMiddleware)// 使用redux-saga
);
const store = createStore(reducer, enhancer)
sagaMiddleware.run(todoSagas)
export default store
// src/store/sagas.js
import { takeEvery, put } from 'redux-saga/effects'
import { GET_INIT_LIST } from './actionTypes'
import { initListAction } from './actionCreators'
import axios from 'axios'
// es6 Generator函数形式
function* getInitList(){
try {
const res = yield axios.get('/api/todolist')
const action = initListAction(res.data)
yield put(action)
} catch(e){
console.log('list数据请求失败')
}
}
function* mySaga() {
yield takeEvery(GET_INIT_LIST, getInitList)
}
export default mySaga
6-8、6-9、如何使用React-redux
- cnpm install react-redux --save
Provider 提供器
import React, {Component} from 'react'
import store from './store'
import { connect } from 'react-redux'
class TodoList extends Component {
handleInputChange (e) {
console.log(e.target.value)
}
render () {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.changeInputValue} />
<button>提交</button>
</div>
<ul>
<li>Dell</li>
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue
}
}
// store.dispatch,props
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue (e) {
const action = {
type: 'change_input_value',
value: e.target.value
}
dispatch(action)
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
6-10、如何使用React-redux
import React, {Component} from 'react'
import store from './store'
import { connect } from 'react-redux'
//无状态组件
const TodoList = (props) => {
const { list, inputValue, changeInputValue, handleClick, handleDelete } = props
return (
<div>
<div>
<input value={inputValue} onChange={changeInputValue} />
<button onClick={handleClick}>提交</button>
</div>
<ul>
{
list.map((item) => {
return <li onClick={handleDelete} key={item}>{item}</li>
})
}
</ul>
</div>
)
}
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list
}
}
// store.dispatch,props
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue (e) {
const action = {
type: 'change_input_value',
value: e.target.value
}
dispatch(action)
},
handleClick () {
console.log(123)
const action = {
type: 'add_item'
}
dispatch(action)
},
handleDelete () {
}
}
}
// connect包装后返回的是容器组件
export default connect(mapStateToProps,mapDispatchToProps)(TodoList)
本文中Redux进阶所有章节示例代码:链接:https://pan.baidu.com/s/1L4RmjM_fYhgAGDEWQQhelA（redux）
链接:https://pan.baidu.com/s/1Njq_-fbt1UqPkxeQgpwrTw（redux-saga）
