(精华2020年5月24日更新) react基础篇 redux的使用和react-redux的使用

  • redux的核心api
    • createStore()
      • 创建包含指定reducer的store对象
    • store对象
      • redux库最核心的管理对象
      • 内部维护着 state reducer对象
    • 核心方法
      • getState()
      • dispatch(action)
      • subscribe
  • redux的三个核心概念
    • action
      • 标识要执行行为的对象
      • 包含两个方面的属性
        • type 标识属性 值是字符串 唯一 必要的属性
        • xxx 数据属性 值类型是任意的 可选属性
        • const action = {type:‘add’,data:2}
      • action的创建工厂
        const add = ()=>({type:‘add’,data:123})
    • reducer
      • 根据老的state 返回新的state 纯函数
      • 编码见代码
      • 注意
        • 返回一个新的状态
        • 不要修改原来的状态
    • store
      • 将state action reducer 联系在一起的对象
      • 如何得到这个对象? 见代码
      • 得到这个对象的功能是什么
        • getState() 得到state
        • dispatch(action) 分发action 触发reducer的调用 产生新的state
        • subscribe() 注册监听 当产生了新的state之后 会自动的调用

首先定义函数变量action-type.js

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

action.js

import {INCREMENT,DECREMENT} from './action-type'
export const increment = number => ({type:INCREMENT,number})
export const decrement = number => ({type:DECREMENT,number})

reducers.js

import {INCREMENT,DECREMENT} from './action-type'
export function counter(state=0,action){
    switch(action.type){
        case INCREMENT:
            return state + action.number
        case DECREMENT:
            return state - action.number
        default:
            return state
    }
}

combineReducers可以连接多个

import {combineReducers} from 'redux'

import {
    ADD_COMMENT,
    DELETE_COMMENT,
    RECEIVE_COMMENT
} from './action-types'
// 
const initComments = []
function comments(state=initComments,action){
    switch(action.type){
        case ADD_COMMENT:
            return [...state,action.data]
        case DELETE_COMMENT:
            return state.filter((c,index)=>index !== action.data)
        case RECEIVE_COMMENT:
            return action.data
        default :
            return state
    }
}

export default combineReducers({
    comments
})

redux下index.js中引用

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import App from './components/app'
import {counter} from './redux/reducers'
const common = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__//安装谷歌插件在浏览器调试
const store = createStore(counter,common())


const render = ()=>{
    ReactDOM.render(<App store={store}/>, document.getElementById('root'))
}
// 初始化渲染
render()

// 注册监听
store.subscribe(render)

redux页面中使用

import React, {Component} from 'react'
import * as actions from '../redux/actions'
export default class App extends Component {
  state = {
    count: 0
  }

  increment = () => {
    const num = this.refs.numSelect.value*1
    this.props.store.dispatch(actions.increment(num))
  }

  decrement = () => {
    const num = this.refs.numSelect.value*1
    this.props.store.dispatch(actions.decrement(num))
  }

  incrementIfOdd = () => {
    let count = this.state.count
    if(count%2==1) {
      this.props.store.dispatch(actions.increment(count))
    }
  }

  incrementAsync = () => {
    const num = this.refs.numSelect.value*1
    setTimeout(() => {
      this.props.store.dispatch(actions.increment(num))
    }, 1000)
  }

  render () {
    return (
      <div>
        <p>
          click {this.props.store.getState()} times {' '}
        </p>
        <select ref="numSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>{' '}
        <button onClick={this.increment}>+</button>{' '}
        <button onClick={this.decrement}>-</button>{' '}
        <button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
        <button onClick={this.incrementAsync}>increment async</button>
      </div>
    )
  }
}

下面介绍react-redux的使用
app.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import Counter from '../components/counter'
import {increment,decrement} from '../redux/actions'
export default connect(
  state=>({count:state}),
  {
    increment,
    decrement
  }
)(Counter)

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import App from './container/app.js'
import {counter} from './redux/reducers'
import {composeWithDevTools} from 'redux-devtools-extension'
// const common = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
const store = createStore(counter,composeWithDevTools())


ReactDOM.render(<Provider store={store}>
    <App />
</Provider>, document.getElementById('root'))

页面中使用

import React, {Component} from 'react'
export default class Counter extends Component {
  increment = () => {
    const num = this.refs.numSelect.value*1
    this.props.increment(num)
  }

  decrement = () => {
    const num = this.refs.numSelect.value*1
    this.props.decrement(num)
  }

  incrementIfOdd = () => {
    const num = this.refs.numSelect.value*1
    let count = this.props.count
    if(count%2==1) {
        this.props.increment(num)
    }
  }

  incrementAsync = () => {
    const num = this.refs.numSelect.value*1
    setTimeout(() => {
        this.props.increment(num)
    }, 1000)
  }

  render () {
    return (
      <div>
        <p>
          click {this.props.count} times {' '}
        </p>
        <select ref="numSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>{' '}
        <button onClick={this.increment}>+</button>{' '}
        <button onClick={this.decrement}>-</button>{' '}
        <button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
        <button onClick={this.incrementAsync}>increment async</button>
      </div>
    )
  }
}

redux的异步使用
改写上面的action.js

import {INCREMENT,DECREMENT} from './action-type'
export const increment = number => ({type:INCREMENT,number})
export const decrement = number => ({type:DECREMENT,number})
//异步用法
export const incrementAsync = number => {
    return dispatch =>{
        setTimeout(()=>{
            dispatch(increment(number))
        },2000)
    }
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import App from './container/app.js'
import {counter} from './redux/reducers'
import {composeWithDevTools} from 'redux-devtools-extension'
import thunk from 'redux-thunk'//异步
// const common = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
const store = createStore(
    counter,
    composeWithDevTools(applyMiddleware(thunk))//加上中间件配合异步
)
ReactDOM.render(<Provider store={store}>
    <App />
</Provider>, document.getElementById('root'))

app.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import Counter from '../components/counter'
import {increment,decrement,incrementAsync} from '../redux/actions'
export default connect(
  state=>({count:state}),
  {
    increment,
    decrement,
    incrementAsync
  }
)(Counter)

页面使用

import React, {Component} from 'react'
export default class Counter extends Component {
  increment = () => {
    const num = this.refs.numSelect.value*1
    this.props.increment(num)
  }

  decrement = () => {
    const num = this.refs.numSelect.value*1
    this.props.decrement(num)
  }

  incrementIfOdd = () => {
    const num = this.refs.numSelect.value*1
    let count = this.props.count
    if(count%2==1) {
        this.props.increment(num)
    }
  }

  incrementAsync = () => {
    const num = this.refs.numSelect.value*1
    this.props.incrementAsync(num)
  }

  render () {
    return (
      <div>
        <p>
          click {this.props.count} times {' '}
        </p>
        <select ref="numSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>{' '}
        <button onClick={this.increment}>+</button>{' '}
        <button onClick={this.decrement}>-</button>{' '}
        <button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
        <button onClick={this.incrementAsync}>increment async</button>
      </div>
    )
  }
}
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页