react 中的状态管理

最新推荐文章于 2024-08-17 13:17:44 发布
最新推荐文章于 2024-08-17 13:17:44 发布
阅读量335 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luzahngfeng/article/details/106366468
版权

flux 介绍

  • flux 是一种架构思想，专门解决软件的结构问题。它跟 MVC 架构是同一类东西，但是更加简单和清晰。flux 存在多种实现（至少 15 种）
  • Facebook Flux 是用来构建客户端 web 应用的应用架构，它利用单向数据流的方式来组合 react 中的视图组件。它更像一个模式而不是一个正式的框架。

redux

  • redux 是什么

    • redux 是一个 JavaScript 容器，用于进行全局的状态管理
    • redux 可以让你构建一致化的应用，运行于不同环境，并且易于测试
    • redux 除了和 react 一起使用，还支持其他的 js 库（vue 、jQuery、JavaScript 等），而且它体积精悍（只有2kb）

  • redux 三大核心

    • 单一数据源头
    • state 是只读的
    • 使用纯函数（reducers）来执行修改 state，纯函数的好处是可以复用

  • redux 组成

    • state 状态

      • 服务器返回的 state
      • 当前组件的 state
      • 全局的 state

    • action 事件

      • 本质是一个 js 对象
      • 必须包含 type 属性
      • 只是描述了有事情要发生，并没有描述如何去更新 state

    • reducer

      • 本质就是一个纯函数
      • 响应发送过来的 action
      • 函数接收两个参数，第一个参数是初始化 state，第二个参数是发送过来的 action
      • state 不能直接修改，需要先进行深复制
      • 必须要有 return 返回值，返回值就是新的 state

    • store 仓库对象

      • 用来把 action 和 reducer 关联到一起的
      • 通过 createStore 来构建 store 仓库
      • 通过 subscribe 来注册监听
      • subscribe 监听的返回值就是这个监听的解绑函数
      • 通过 dispatch 来发送 action

      注意：组件销毁时，必须要去取消 subscribe 监听

      在这里插入图片描述

  • redux 使用

    • 安装 redux 包
    $ npm install redux -S
    • 创建 store 对象
    // 引入 redux 模块
import { createStore } from 'redux'

// state 的初始状态
const initState = {
  collapsed: false
}

// reducer：唯一修改 state 的地方，不能影响原来的状态，需要深复制
const reducer = (state = initState, action) => {
  const newState = {...state} // 深复制原来的状态
  
  switch (action.type) {
    case 'change_collapsed':
      newState.collapsed = action.collapsed
      return newState // 返回新状态

    default:
      return state
  }
}

// 创建 store，将 action 和 reducer 关联到一起
const store = createStore(reducer)

// 导出 store
export default store
    • 监听 state 数据
    // 利用 subscribe 方法，监听 state 转态
this.unsubscribe = store.subscribe(() => {
    console.log(store.getState())
})
    • 解绑 state 的监听
    // 利用监听时候接收的返回值调用进行解绑
componentWillUnmount () {
    this.unsubscribe()
}
    • 发送同步 action，修改 state 数据
    // 利用 dispatch 方法，发送一个 action，type 必须写
store.dispatch({
    type: 'change_collapsed',
    collapsed: this.state.collapsed
})
    • 发送异步 action

    action 是一个 promise 对象时，需要使用 redux-promise 中间件

    import {createStore, applyMiddleware} from 'react-redux'
// 安装 redux-promise ,并引入
import promiseMiddleware from 'redux-promise'

// state 的初始状态
const initState = {
  list: []
}

// reducer：唯一修改 state 的地方
const reducer = (state = initState, action) => {
  const newState = {...state} // 深复制原来的状态
  
  switch (action.type) {
    case 'get_data':
      newState.list = action.list
      return newState // 返回新状态

    default:
      return state
  }
}

// 创建 store 时，使用中间件
const store = createStore(reducer, applyMiddleware(promiseMiddleware))


// 封装一个异步函数，返回值是一个 promise 对象
const getDate = () => {
    return axios.get('http://loaclhost:5000/user').then(res => {
        return {
            type: 'get_data',
            list: res.data.list
        }
    })
}

// 发送 action 时，传入 promise 对象
store.dispatch(getData())  // 发送一个 promise 对象

    action 是一个 函数时，需要使用 redux-thunk 中间件

    import {createStore, applyMiddleware} from 'react-redux'
// 下载处理函数的中间件 redux-thunk ,并引入
import thunkMiddleware from 'redux-thunk'

// state 的初始状态
const initState = {
  list: []
}

// reducer：唯一修改 state 的地方
const reducer = (state = initState, action) => {
  const newState = {...state} // 深复制原来的状态
  
  switch (action.type) {
    case 'get_data':
      newState.list = action.list
      return newState // 返回新状态

    default:
      return state
  }
}

// 创建 store 时，使用中间件
const store = createStore(reducer, applyMiddleware(thunkMiddleware))

// 也可以同时使用多个中间件
// const store = createStore(reducer, applyMiddleware(promiseMiddleware，thunkMiddleware))


// action 是一个函数
const getDate = () => {
    return (dispatch) => {
        axios.get('http://loaclhost:5000/user').then(res => {
       		dispatch({
                type: 'get_data',
                list: res.data.list
            })
        })
    }
}

// 发送 action 时，传入一个函数
store.dispatch(getData())
    • reducer 拆分模块
      • reducer 可以拆分多个文件，每个文件中处理单独的 action
    import { combineReducers } from"redux"
import collapsedReducer from 'xxxx'
import listReducer from 'xxxx'

// 用 combineReducers 方法将多个子 reducer 组合到一起
const reducer = combineReducers({
    collapsed: collapsedReducer,
    list: listReducer
})

// 创建 store 
const store = createStore(reducer)

    // collapsedReduces 文件

const collapsedReducer = (state = false, action) => {
  switch (action.type) {
    case 'change_collapsed':
      return action.collapsed
    default:
      return state
  }
}

export default collapsedReducer

react-redux

针对 react 封装的一个全局状态管理工具，它是基于 redux 的实现，所以基本的 redux 知识没变，它只是让我们在组件中获取 store 中的 state 和 派发 action 变得简单了

  • 安装依赖

    $ npm install redux react-redux -S

  • redux 创建 store、reducer 等都一样

  • react-redux 中的两个重要成员（Provider、connect）

    • Provider 包裹在根组件最外层，使所有的子组件都可以拿到 state
    • Provider 接收 store 作为 props，然后通过 context 往下传递，这样 react 中的任何组件都可以通过 context 获取到 store
    • Provider 内部组件如果想要使用 state 中的数据，就必须要用 connect 进行一层包裹封装，换一句话说就是必须要被 connect 进行加强
    • connect 就是方便我们能够获取到 store 中的 state，以及派发 action
    // 引入 Provider 组件
import { Provider } from 'react-redux'
// 引入 store 仓库
import store from 'xxxx'

// 使用 Provider 组件包裹根组件
render () {
    return (
        <Provider store={store}>
        	<App />
        </Provider>
    )
}
    • connect 使用
    import React, { Component } from 'react'
// 导入 connect
import { connect } from 'react-redux'

class Home extends Component {
  render() {
    return (
      <div>
        home
        <button onClick={this.props.sendAction()}>点击发送 action</button>
      </div>
    )
  }
}

// 获取 store 中的 state，并传递给被加强的组件
const mapStateToProps = (state) => { // 内部会自动实现订阅
    return state // 组件中通过 this.props.state 就可以获取到这里返回的值
}

// 发送 action 的，写法一：mapDispatchToProps 函数写法
const mapDispatchToProps = (dispatch) => {
    return {
        sendAction: () => {
            // 发送 action
            dispatch({
                tyep: 'send_action',
                list: xxxx
            })
        }
    }
}

// 写法二: mapDispatchToProps 对象写法，
const mapDispatchToProps = {
    sendAction: () => { // 调用这个方法后，内部会自动调用 dispatch 方法
        return {
            type: 'send_action',
            list: xxxxx
        }
    }
}

// 使用 connect 包裹要加强的组件，第一个参数是获取 state 的，第二个参数是发送 action 的
export default connect(mapStateToProps, mapDispatchToProps)(Home)

redux devtools 插件的使用

  • 在浏览器上安装 redux devtools 插件

  • 在创建 store 的时候，配置使用 redux devtools

  • redux devtools npm 地址

    import {createStore, applyMiddleware, compose } from 'react-redux'
// 下载处理函数的中间件 redux-thunk ,并引入
import thunkMiddleware from 'redux-thunk'

// state 的初始状态
const initState = {
  list: []
}

// reducer：唯一修改 state 的地方
const reducer = (state = initState, action) => {
  const newState = {...state} // 深复制原来的状态
  
  switch (action.type) {
    case 'get_data':
      newState.list = action.list
      return newState // 返回新状态

    default:
      return state
  }
}

// 创建 store 时，使用中间件
// 使用 composeEnhancers 包裹 applyMiddleware 后就可以正常使用 redux devtools 了
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducer, composeEnhancers(
    applyMiddleware(promiseMiddleware，thunkMiddleware)
))

export default store
L?z ^f my
关注
专栏目录
React状态管理
weixin_42307490的博客
07-15 1269
状态管理 传统MVC框架的缺陷 什么是MVC？ [外链图片转存失败(img-5UKs5YTH-1563154546022)(./images/mvc-base.png)] MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。 V即View视图是指用户看到并与之交互的界面。 M即Model模型是管...
react全局状态管理_react的状态管理
weixin_27127993的博客
01-17 2508
近两年前端技术的发展如火如荼，大量的前端项目都在使用或转向 Vue 和 React 的阵营， 由前端渲染页面的单页应用占比也越来越高，这就代表前端工作的复杂度也在直线上升，前端页面上展示的信息越来越多也越来越复杂。我们知道，任何状态都需要进行管理，那么今天我们来聊聊前端状态管理。前端状态管理第三方出名的库有： Flux、Redux、Vuex、Mobx 等这里专讲react的状态管理演变redux...
React中的状态管理
精通前端技术，了解后端接口
11-01 2813
当谈到前端开发中的状态管理时，React是一个备受推崇的选择。React的状态管理机制被广泛应用于构建大型、复杂的应用程序，它提供了一种优雅且高效的方式来管理组件之间的数据流。在本博客中，我们将探讨React中的状态管理及其相关概念。React的状态管理机制为开发者提供了强大且灵活的工具，使得构建复杂应用程序变得更加简单和高效。无论是本地状态管理还是全局状态管理，React都可以满足各种需求，并帮助我们构建出优秀的前端应用。
前端宝典之八：React状态管理全解析并手写实现
最新发布
franktaoge的博客
08-17 1175
React 中用于状态管理的hook及库有：useState、useReducer、useContext、useReducer + useContext和一些第三方的库如redux、mobx等
React状态管理器
qq_50352386的博客
10-24 1019
(1)store/modules文件夹子目录如上api文件夹如上，修改入口文件如上 APP.jsx如上。（1）创建store文件夹，内置modules文件夹，创建home.js和kind.js。(2)修改index.js文件 订阅数据的变化，重新渲染视图 导入Provider组件。(1)创建store文件夹下index.js 创建状态管理器。（2）入口文件配置如上 ，api文件如上,App.jsX如上。(1)创建store文件夹，modules文件夹。(1)创建store文件夹index.js。
react-揭秘React状态管理
08-14
React 是 Facebook 提出的前端框架，作为 View 层很好地解决了视图层渲染问题，但是却缺乏有效的状态管理，在构建大型的前端应用就会显得十分乏力时，需要有一个良好的状态管理，如：Flux，Redux，Mobx 等等.
40行代码把Vue3的响应式集成进React做状态管理
10-15
在标签方面，“Vue3 响应式集成React状态管理”指的是通过Vue3的响应式系统来管理React应用的状态，“Vue3 响应式”则是特指Vue3所提供的响应式编程能力。 通过这篇文章的学习，开发者可以了解到如何将Vue3的响应式...
react-一个ReactHooks状态管理器
08-15
在实际开发中，使用状态管理库（如 flooks）可以带来以下好处： 1. **代码组织**：将状态提升到共享组件层级，减少组件间的props传递，使代码更清晰。 2. **可复用性**：通过创建可复用的状态钩子，可以简化状态...
react中使用vuex管理状态
08-08
在React开发中，状态管理是应用复杂性的重要组成部分。通常，React本身提供的组件状态和props可以处理大部分小型项目的需求，但对于大型、多组件交互的应用，就需要一个统一的状态管理工具。Vuex是Vue.js生态系统中...
react引入状态管理
MK.Gao Blog
05-10 467
why how 不同级别组件的状态依赖，或者影响数据
react状态管理_React状态
cuk0051的博客
08-29 226
react状态管理 设置默认状态 (Setting the default state) In the Component constructor, initialize this.state. For example the BlogPostExcerpt component might have a clicked state: 在Component构造函数中，初始化this.state 。...
React中的状态管理---Redux
weixin_33810302的博客
05-18 199
我们以todolist中增加代办事项这个功能为例: 为了开发规范一点我们要采取reducer的分片写法,即一个类型数据一个模块 不使用react-redux书写规范 生产安装redux yarn add redux复制代码 在src目录下建立store目录 建立index.js和reducer.js index.js import { createStore } f...
React 之 Redux - 状态管理
玄鱼殇
08-03 2220
React 之 Redux - 状态管理
React的状态管理
weixin_34004576的博客
04-22 243
主要内容,看看State的状态管理方式,包括最基本的方式和React-Hooks方式以及Redux方式和ReSub方式 我们从基本的方式开始 React和数据的基本交互方式 在MVC程序构架中,React经常被称为View层,但实际上并不完全是这样, React实际对MVC模式做了新的构想. 本质上React只是借助JSX语法实现的UI界面库,但是UI都需要数据来填充,所以问题就是如何获取数据...
React--状态管理
qq_73561036的博客
05-27 1552
React控制UI的方式是声明式的。你不必直接控制UI的各个部分，只需要声明组建可以处于的不同状态，并根据用户的输入在它们之间切换。
react中的状态管理-redux
fangqi20170515的博客
08-14 481
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用;3. 作用: 集中式管理react应用中多个组件共享的状态。监测redux的状态变化也可以在index.js入口文件中完成。在App.js文件中引入组件count/index.js。作用：创建包含指定reducer的store对象。作用：应用上基于redux的中间件(插件库)1. redux是一个专门用于做。作用：合并多个reducer函数。........................
React组件状态管理与更新
"React State(状态) 是React框架中用于管理组件内部数据的关键特性，它允许组件根据其状态的变化自动更新视图。React组件的状态是一个包含数据的对象，可以通过调用`setState()`方法来改变，进而触发组件的重新渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值