本文共 5615 字，大约阅读时间需要 18 分钟。

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(
   , 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 (      
   
        
    
          click {
   this.props.store.getState()} times {
   ' '}        
        
              1          2          3        {
   ' '}        
    +{
   ' '}        
    -{
   ' '}        
    increment if odd{
   ' '}        
    increment async      
   
    )  }}

第二版本

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(
       
    
   , 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 (      
   
        
    
          click {
   this.props.count} times {
   ' '}        
        
              1          2          3        {
   ' '}        
    +{
   ' '}        
    -{
   ' '}        
    increment if odd{
   ' '}        
    increment async      
   
    )  }}

第三版本

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(
       
    
   , 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 (      
   
        
    
          click {
   this.props.count} times {
   ' '}        
        
              1          2          3        {
   ' '}        
    +{
   ' '}        
    -{
   ' '}        
    increment if odd{
   ' '}        
    increment async      
   
    )  }}

转载地址：https://codeboy.blog.csdn.net/article/details/107648629 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！