状态管理之 redux、dva、vuex

最新推荐文章于 2025-05-02 15:45:00 发布

SarinaDu

最新推荐文章于 2025-05-02 15:45:00 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/103752114

版权

本文介绍了JavaScript状态管理库redux、dva和vuex的使用和区别。redux是一个可预测的状态容器，通过dispatch(action)改变state，并可借助redux-saga处理异步操作。dva是对redux的轻量级封装，简化了操作，其action的type以namespace/开头，使用model的effects处理异步。vuex中，dispatch用于分发action，action提交mutation以修改状态，且action可以包含异步操作，mutation是更改状态的唯一方法。

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

前言

日常积累，欢迎指正

1、状态管理之 redux、dva、vuex

1.1、redux

Redux is a predictable state container for JavaScript apps - Redux是一个可预测的 JavaScript 应用程序状态容器

redux 中

dispatch(action/actionCreator) 触发 state 修改
state 修改引发页面重新渲染

异步处理：借助 redux-saga 等工具实现

container 组件示例


import App from '../pages/App'
import {
    connect } from 'react-redux'
import {
    Dispatch } from 'redux'
import {
    IStoreState } from '../types/todoList'
import {
    willToDone, doneToWill,del, add } from '../actions/todoList'

interface IProps {
   }

const mapStateToProps = (state: IStoreState, ownProps: IProps) => {
   
    return {
   
        todoList: state.todoList
    }
}

const mapDispatchToProps = (dispatch: Dispatch, ownProps: IProps) => {
   
    return {
   
        willToDone: (id: number ) => {
   
            dispatch(willToDone(id))
        },
        del: (id: number) => {
   
            dispatch(del(id)

最低0.47元/天解锁文章