React Redux

action-type.js

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
Copy the code

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)}}Copy the code

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
    }
}
Copy the code

The first version

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'))}// Initialize render
render()

// Register listener
store.subscribe(render)
Copy the code

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>)}}Copy the code

The second version

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'))
Copy the code

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)
Copy the code

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>)}}Copy the code

The third version

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'))
Copy the code

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)
Copy the code

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>)}}Copy the code