学习记录——redux模块拆分和redux-thunk

本文介绍了如何在Redux中进行模块拆分,通过将独立模块拆分成单独的reducer,并利用`combineReducers`进行合并。同时,文章探讨了redux-thunk的使用,它允许在reducer内执行异步操作。通过安装redux-thunk,可以在store配置中引入,并在组件内利用dispatch发送支持异步操作的函数。

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

redux的模块拆分
根据独立的模块可以拆分出单独的reducer

合并reducer:redux自带的一个方法combineReducers,将拆分的reducer最后合并成一个大的reducer
redux-thunk:可以在reducer进行异步操作 下载:npm i redux-thunk -S

store/index.js:

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'

let data = (state = { searchIpt: '' }, action) => {
    switch (action.type) {
        case 'SAVE_DATA':
            if (action.data !== undefined) {
                state.list = action.data.listData
                return JSON.parse(JSON.stringify(state))
            }

        default:
            return state
    }
}

let loginModule = (state = { isShow: false }, action) => {
    switch (action.type) {
        case 'LOGIN_CLICK':
            if (action.data != undefined) {
                state.isShow= action.data
                return JSON.parse(JSON.stringify(state))
            }
        default:
            return state;
    }
}



const store = createStore(combineReducers({
    data, loginModule
}), applyMiddleware(thunkMiddleware))

export default store

组件内使用
正常情况下dispatch传的是一个对象(同步)
使用redux-thunk以后dispatch可以支持传一个函数进行异步请求

const mapStateToProps = (state) => {
    return {
        list: state.data.list,
        isShow: state.loginModule.isShow
    }
}

const mapDispatchToProps = dispatch => {
    return {
        getData() {
            dispatch(() => {
                axios.get('/api/getData').then(res => {
                    if(res.data.code===1){
	                     dispatch({
	                        type: 'SAVE_DATA',
	                        data: res.data.data
	                    })
                    }else{
                    	console.log(res)
                    }
                })
            })
        },
       
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值