react学习笔记-UI组件、容器组件、Redux进阶（7）

作者: wayne1125 | 来源:发表于2019-07-08 10:09 被阅读0次

【学习笔记】React ⑧ react-redux的使用
react学习笔记-UI组件、容器组件、Redux进阶（7）
React-Redux
react-redux connect方法
react-redux
React进阶(6)-react-redux的使用
在mapDispatchToProps里操作数据this.set
记录react相关一些功能使用(持续更新)
记一次 react-redux 分享
RN：React-Redux

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)