资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/「 React 」redux

「 React 」redux

kevin / 487人阅读

摘要：简介是一个独立专门用于做状态管理的库不是插件库它可以用在等项目中但演变至今基本与配合使用作用集中式管理应用中多个组件共享的状态如果不是比较复杂的组件间通信的情况下建议还是不使用因为会造成代码量的上升和复杂关键模块保存状态的主要部分共享的状态

简介

1) redux是一个独立专门用于做状态管理的JS库(不是react插件库)
2) 它可以用在react, angular, vue等项目中, 但演变至今基本与react配合使用
3) 作用: 集中式管理react应用中多个组件共享的状态

Tip:redux如果不是比较复杂的组件间通信的情况下,建议还是不使用,因为会造成代码量的上升和复杂

关键模块

Store

保存状态的主要部分,共享的状态数据保存在该对象中

Action Creators

工厂函数,主要用来生成action对象,传输更新的状态数据.

Reducers

接收action对象,对之前的状态和action中的新状态进行操作,并且返回新的结果存在store中.

关键函数

store.createStore()

创建store对象,参数传入reducers进行绑定.

store.dispatch()

分发action对象,传入reducers,进行状态的更新.

store.subscribe()

监听事件,当有状态改变时,会自动调用监听的方法(一般用来重新渲染方法)

使用示例 1.下载安装 
</>复制代码 
  1. //此处我使用的是yarn,后面两个后面介绍
  2. yarn add redux  react-redux  redux-thunk
2.创建文件目录

3.各部分内容

store.js

</>复制代码 
  1. import { createStore,applyMiddleware } from "redux"
  2. import reducer from "./reducer"   //导入reducer进行绑定
  3. import thunk from "redux-thunk"    //这是一个异步解析实现
  4. export default createStore(reducer,applyMiddleware(thunk)); // 导出store对象

action-creator.js

</>复制代码 
  1. import { INCREASE, DECREASE } from "./action-type"  //全局命名声明文件
  2. // 不同的操作,返回action对象,type为标识,data为传输的数据
  3. export const incresement = (data) => ({ type:INCREASE,data:data})  
  4. export const decresement = (data) =>({type:DECREASE,data:data})
  5. //模拟异步操作,返回的是主动进行分发操作的一个函数
  6. export const incresementAsync = (data) => {
  7.     return (dispatch) => {
  8.       setTimeout(()=>{
  9.         dispatch(incresement(data))
  10.       },1000)
  11.     }
  12.     
  13. }

reducer.js

</>复制代码 
  1. import {INCREASE,DECREASE} from "./action-type"
  2. //当有dispatch被调用时,会自动来遍历该模块中的所有函数,并进行匹配.
  3. //previousState为之前的状态,action中包含着新的数据
  4. export default function number(previousState = 0,action) {
  5.     switch(action.type){
  6.         case INCREASE:
  7.         return previousState + action.data;
  8.         case DECREASE:
  9.         return previousState - action.data;
  10.         default:
  11.         return previousState;
  12.     }
  13. }

action-type.js

</>复制代码 
  1. //声明定义了一些命名
  2. export const INCREASE = "INCREASE";
  3. export const DECREASE = "DECREASE";

App.js

</>复制代码 
  1. import React, { Component } from "react"
  2. import { connect } from "react-redux"
  3. import { incresement, decresement,incresementAsync } from "./redux/action-creator"
  4. class App extends Component {
  5. // 进行更新操作
  6.   increase = () => {
  7.     this.props.incresement(1)
  8.   }
  9.   decrease = () => {
  10.     this.props.decresement(1)
  11.   }
  12.   increaseAsync = () => {
  13.     this.props.incresementAsync(1)
  14.   }
  15.   render() {
  16.     return (
  17.       
  18.       //获取状态值
  19.         
    click {this.props.number} times
  20.         
  21.         
  22.         
  23.       
  24.     )
  25.   }
  26. }
  27. //关键在这里,这是简写的方式.
  28. //得益于react-redux,将创建action对象和dispatch的操作都进行了封装简化,并且封装了获取状态值.
  29. //不管是进行获取还是更新操作,都封装进了props属性中.
  30. export default connect(
  31.   (state) => ({ number: state }),
  32.   { incresement, decresement,incresementAsync }
  33. )(App)

index.js

</>复制代码 
  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import { Provider } from "react-redux"
  4. import store from "./redux/store"
  5. import App from "./App";
  6. // 用Provider包装,就省略了用subscribe()监听的回调.
  7. ReactDOM.render(, document.getElementById("root"));
react-redux

专门用来简化redux在react中使用的一个库.
它将原生redux的.getState(),创建action对象,dispatch等方法进行了封装.提供如上代码的简写方式.

redux-thunk

用来帮助解析异步操作.
只需要在创建store对象的时候用中间件包装的方式作为第二个参数传入即可.

扩展调试工具

redux-devtools-extension.

在谷歌商店中装好这个插件,然后在创建store对象的时候

</>复制代码 
  1. import { createStore, applyMiddleware } from "redux";
  2. import { composeWithDevTools } from "redux-devtools-extension";
  3. const store = createStore(reducer, composeWithDevTools(
  4.   applyMiddleware(...middleware),
  5.   // other store enhancers if any
  6. ));
总结

redux在复杂项目中比较适合使用.它保存着一些多处需要共享的状态数据,在整个项目中比较方便进行状态数据的更新以及获取.

避免了一些层级比较多或者跨越了比较多级的同级兄弟组件需要互相通信的复杂过程.

GPU云服务器 云服务器 react-redux React_Redux_Appointm react-router-redux Redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103668.html

相关文章

  • react 前端项目技术选型、开发工具、周边生态

    摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...

    hersion 评论0 收藏0

  • react 前端项目技术选型、开发工具、周边生态

    摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态 声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识 主架构：react, react-router, redux, redux...

    kidsamong 评论0 收藏0

  • React手稿之 React-Redux

    摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 属性是必须的。...

    Freelander 评论0 收藏0

  • react-redux

    摘要：主要用于构建，被认为是中的视图。高效通过对的模拟，最大限度地减少与的交互。也就是说，用户负责视觉层，状态管理则是全部交给它。该回调函数必须返回一个纯对象，这个对象会与组件的合并。 React 定义： React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，React 被认为是 MVC 中的 V（视图）。 特点： 声明式设计 −React采用声明范式...

    sanyang 评论0 收藏0

  • react开发教程（十）redux结合react

    摘要：描述和之间没有关系。但是还是比较适合和搭配的，因为允许你以的形式来描述界面，而非常擅长控制的变化。应用中应有且仅有一个。只需要在渲染根组件时使用即可。创建上一篇开发教程九基础 描述 Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的，因为 React 允许你以 state 的形式...

    jsliang 评论0 收藏0

发表评论

登陆后可评论

0条评论

kevin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<