redux-thunk 示例

import 'antd/dist/antd.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
import { createStore,combineReducers,applyMiddleware } from 'redux';

import createLogger from 'redux-logger';
import thunk from 'redux-thunk';


const text = (state=0,action)=>{
    const {type,payLoad} = action;
    switch(type){
        case 'TEXT':
            return Object.assign({},state,{userName:payLoad});
        default:
            return state;
    }
}

const chatReducer = combineReducers({
    text
})

let {getState,subscribe,dispatch} = createStore(
    chatReducer,
    applyMiddleware(thunk,createLogger),
);

function getData(){
    console.log('getData');
    var url = 'https://douban.uieee.com/v2/movie/in_theaters';

    return fetch(url).then((res)=>{
        return res.json()
    }).then(data=>{
        console.log('data',data);
        return data.title;
    })
}

const TextContent =({value,onText})=>{
    return  

                
{value.text.userName}
            
}

function Content(){
    return(
        

            
             clickEvent()}>点击
        
    )
}

function clickEvent () {
    dispatch(funs())
}

function funs() {
    return function (dispatch) {
        dispatch({
            type: 'TEXT',
            payLoad: 'titile starting.........'
        });
        getData().then(res => {
            console.log('res',res);
            dispatch({
                type: 'TEXT',
                payLoad: res
            })
        }).catch(err => {
            dispatch({
                type: 'TEXT',
                payLoad: 'titile errors........'
            })
        })
    }
}

const render=()=>{
    ReactDOM.render(
        ,
        document.getElementById('root')
    )
}
render();
subscribe(render);

下面我们把Content函数组件改成class组件

import 'antd/dist/antd.css';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'antd';
import { createStore,combineReducers,applyMiddleware } from 'redux';

import createLogger from 'redux-logger';
import thunk from 'redux-thunk';


const text = (state=0,action)=>{
    const {type,payLoad} = action;
    switch(type){
        case 'TEXT':
            return Object.assign({},state,{userName:payLoad});
        default:
            return state;
    }
}

const chatReducer = combineReducers({
    text
})

let {getState,subscribe,dispatch} = createStore(
    chatReducer,
    applyMiddleware(thunk,createLogger),
);

function getData(){
    console.log('getData');
    var url = 'https://douban.uieee.com/v2/movie/in_theaters';

    return fetch(url).then((res)=>{
        return res.json()
    }).then(data=>{
        console.log('data',data);
        return data.title;
    })
}

const TextContent =({value,onText})=>{
    return  

                
{value.text.userName}
            
}

class Content extends Component{
    constructor(props){
       super(props);
    }
    clickEvent=()=>{
        console.log('clickEvent');
        dispatch(this.funs());
    }
    funs(){
        return function (dispatch) {
            dispatch({
                type: 'TEXT',
                payLoad: 'titile starting.........'
            });
            getData().then(res => {
                console.log('res',res);
                dispatch({
                    type: 'TEXT',
                    payLoad: res
                })
            }).catch(err => {
                dispatch({
                    type: 'TEXT',
                    payLoad: 'titile errors........'
                })
            })
        }
    }

    render(){
        return (
            

                
                点击
            
        )
    }
}

const render=()=>{
    ReactDOM.render(
        ,
        document.getElementById('root')
    )
}
render();
subscribe(render);