(精华)2020年7月28日 React redux的使用

action-type.js

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

actions.js

import {INCREMENT,DECREMENT} from './action-type'
export const increment = number => ({type:INCREMENT,number})
export const decrement = number => ({type:DECREMENT,number})
export const incrementAsync= ()=>{
    return dispatch=>{
        setTimeout(()=>{
            const comments = 2
            dispatch(increment(comments))
        },1000)
    }
}

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
    }
}

第一版本

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)

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>
    )
  }
}

第二版本

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'
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)

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>
    )
  }
}

第三版本

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'))

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>
    )
  }
}