redux-thunk 示例

最新推荐文章于 2025-05-30 10:22:02 发布

原创最新推荐文章于 2025-05-30 10:22:02 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#redux-thunk 示例

redux 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在React应用中使用Redux进行状态管理，包括创建store、使用中间件、异步操作处理及从函数组件到Class组件的转换过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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  <div>
                <h1>{value.text.userName}</h1>
            </div>
}

function Content(){
    return(
        <div>
            <TextContent
                value={getState()}
            />
            <Button onClick={() => clickEvent()}>点击</Button>
        </div>
    )
}

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(
        <Content/>,
        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  <div>
                <h1>{value.text.userName}</h1>
            </div>
}

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 (
            <div>
                <TextContent
                    value={getState()}
                />
                <Button onClick={this.clickEvent}>点击</Button>
            </div>
        )
    }
}

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