redux的介绍与使用

最新推荐文章于 2021-12-14 10:10:01 发布
最新推荐文章于 2021-12-14 10:10:01 发布
阅读量224 收藏
点赞数 1
分类专栏： React 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44944943/article/details/109643675
版权

redux

起源

2014年 Facebook 提出了 [Flux]架构的概念，采用 单向数据流 思想。
2015年，[Redux]出现，将 Flux 与 函数式编程 结合一起，很短时间内就成为了最热门的状态管理架构。

Redux 概述

  • yarn add redux

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juf8nKQT-1605163411331)(./imgs/redux-1.png)]

Redux 是 JavaScript 应用的可预测状态容器，用来集中管理状态。
特点：集中管理、可预测、易于测试、易于调试、强大的中间件机制满足你所有需求。
注意：redux 是一个独立于 react 的库，可以配合任何 UI 库/框架来使用。

redux的三大原则

  1. 单一数据源 （整个应用的 [state]被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一 一个 [store]中。）

  2. State是只读的 （唯一改变 state 的方法就是触发 [action]，action 是一个用于描述已发生事件的普通对象。是store数据的唯一来源）

  3. Reducer中使用纯函数来执行修改 （为了描述 action 如何改变 state tree ，

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。）

什么情况下需要使用redux

  1. 总体原则: 大型项目状态管理复杂才用

  2. 某个组件的状态，需要共享

  3. 某个状态需要在任何地方都可以拿到

  4. 一个组件需要改变全局状态

  5. 一个组件需要改变另一个组件的状态

三个核心概念

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers。

  • Action：描述要执行的行为动作，比如要让计数器的值加1（提出想法）。
  • Reducer：接收 Action 完成该动作，比如完成值加1得到新状态 { count: 1 }（实现想法）。
  • Store：是 Action 和 Reducer 的桥梁，将 Action 传递给 Reducer。

action

  • action 是一个原生 JavaScript 对象。
  • 作用：描述要执行的行为动作，提供完成该动作需要的数据。比如：计数器案例 +1 就是一个动作
  • 约定1：必须提供 type 属性，用于描述动作类型。
  • 约定2：type 属性的值是字符串，约定使用全大写字母。
  • 约定3：可以提供其他属性，提供完成该动作需要的数据。
  • 简化操作：使用函数来创建 action，将该函数叫做 action creator。
{ type: 'INCREMENT', data: 2, }

// todo app，添加任务的action：
{ type: 'ADD_TODO', text: '学习Redux' }

// action creator:
const increment = () => ({ type: 'INCREMENT' })
// 创建action
increment()

reducer

  • reducer 是一个函数。
  • 作用：接收 action 和 state（初始 state）， 完成该行为动作，并返回新 state。
  • 代码解释：(state, action) => newState。
  • 约定：不要直接修改 state，而是，根据当前 state 得到新的 state。
  • 注意：reducer 应该是一个纯函数（同样的输入，必定得到同样的输出），不要有修改参数、调用 Math.random() 等不纯的操作。
const counter = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1 // state++ 表示直接修改当前 state
    default:           // 必须得有！默认返回当前 state
      return state
  }
}

store

  • Redux 的 state 仓库。一个 redux 应用只有一个 store。
  • 作用：将 action 和 reducer 组合到一起。
  • 职责：
    • 1 提供整个应用的 state
    • 2 提供 dispatch 方法，用来触发 action
    • 3 提供 getState 方法，用来获取整个应用的 state
    • 4 提供 subscribe 方法，监听 state 变化。
import { createStore } from 'redux'
import counter from './reducer'
// 接收 reducer 作为参数，创建 store
const store = createStore(counter)

store.getState() // 获取state
store.dispatch() // 触发 action
const unsubscribe = store.subscribe(() => {}) // 监听 state 变化
//调用unsubscribe()取消监听state变化

redux的基本使用

// 1.安装
redux yarn add redux
// 2.在js文件中从redex包里面导入createStore函数
import { createStore } from 'redux'
//3. 创建store,将reducer传入到store中
const store = createStore(reducer)
// 4. 定义reducer函数 
//	要接收两个参数: state, action
//  注意:在定义reducer的时候,通过es6语法设置默认值的方式,初始化state的值
function reducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    default:
      return state //一定要写一个默认情况,返回原来的state
  }
}
// 调用subscribe,监听state的变化 注意: 要在dispatch之前调用
store.subscribe(() => {
  console.log(store.getState())
})

//console.log(store.getState()) //获取store中state的状态值
store.dispatch({ type: 'INCREMENT' }) // 分发action
store.dispatch({ type: 'INCREMENT' }) // 分发action
//console.log(store.getState())

redux的内部执行原理

// 创建store的时候,会自动调用一次reducer函数
const store = createStore(reducer)
// redux内部会创建一个action {type: "@@redux/INIT8.v.s.i.j.j"，state：undefined}
// 目的是让reducer中执行默认的返回值,从而拿到state的初始化值
function reducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return  state + 1
    default:
      return state //一定要写一个默认情况,返回原来的state
  }
}


store.dispatch({ type: 'INCREMENT' }) //这次分发action,reducer中拿到的state 0
store.dispatch({ type: 'INCREMENT' }) // 这次分发action,reducer中拿到的state 1
//console.log(store.getState())
//后面每一次调用dispatch的时候,reducer也会执行.这里执行是为了修改redux中state的数据

react-redux

  • Redux 只能用来管理应用的 state。
  • 如果要配合 react 使用，需要借助 react-redux 这个绑定库。

核心API

  • Provider 组件：用来包裹整个 React 应用，接收 store 属性，为应用提供 state 和 操作 state 的方法。
  • connect 函数：连接 Redux 和 React 组件，为被包裹的组件提供 state 和 操作 state 的方法。
    组件中通过 props 获取 Redux store 的内容。
import { Provider } from 'react-redux'
<Provider store={store}>
  <App />
</Provider>

connect()(Co
// mapStateToProps 函数：提供组件用到的state，作为组件的props，传递给 Counter 组件
// mapDispatchToProps 函数：提供组件用到的操作state的方法，作为组件的props ，传递给 Counter 组件
//注意: 这两个参数是函数,一定要有返回值(返回值是对象)并且都是可选的(可以不传) 
connect(mapStateToProps, mapDispatchToProps)(Counter)

使用步骤

  • 1 安装：yarn add react-redux。
  • 2 导入 Provider 组件。
  • 3 使用 Provider 组件，作为 React 应用的根组件，包裹整个应用。
  • 4 将 redux 的 store 作为 Provider 组件 store 属性的值。
  • 5 导入 connect 函数（将 React 组件 和 Redux store 链接在一起）。
  • 6 使用 connect 函数，包装 React 组件。
  • 7 在 React 组件中，通过 props 获取到 Redux store 中的state。
//导入provider和connect
import { Provider, connect } from 'react-redux'

// 定义的函数组件
function Counter(props) {
  console.log(props) //默认可以获取到dispatch方法
  return (
    <div>
      <div>{props.count}</div>
      <button onClick={() => props.onincrement()}>+1</button>
    </div>
  )
}
//使用connect包装Counter组件
const WithCounter = connect(
  mapState,
  mapDispatch
)(Counter)

//connect要用的第一个参数 
// state是redux中的state
const mapState = state => {
  return {
      // 这里return的内容就是react组件中props接收到的数据
    count: state
  }
}
//connect要用的第二个参数
//dispatch 是redux中的dispath
const mapDispatch = dispatch => {
  return {
       // 这里return的内容就是react组件中props接收到的数据
    onincrement() {
      dispatch({ type: 'INCREMENT' })
    }
  }
}
//最终使用包装后的组件
ReactDOM.render(
  <Provider store={store}>
    <WithCounter></WithCounter>
  </Provider>,
  document.getElementById('root')
)

react-redux 简写形式

// loading和getUserDataAsync 是连个actionCeater函数
import {
  loading,
  getUserDataAsync
} from './redux/actions'

// 基础写法: 
let mapStateToProps = state => {
  // console.log(state)
  return {
    ...state
  }
}
let mapDisPatchToProps = dispatch => {
  return {
    loading: () => {
      dispatch(loading())
    },
    getUserDataAsync: searchname => {
      dispatch(getUserDataAsync(searchname))
    }
  }
}
connect(
 mapStateToProps,
 mapDisPatchToProps
)(UI组件)
// 简写形式:
// 上面的方式可以简写成下面这种方式:
connect(
  state => ({ ...state }),
  { loading, getUserDataAsync }
)(UI组件)

两种类型的组件

  • 展示组件(UI组件)
    • 可以理解为： 不跟 redux 关联的组件（要传入connect() 中的组件 ）
    • 特点： 提供了组件的结构和样式
<Todo />
  • 容器组件
    • 可以理解为： 跟 redux 密切关联的组件（ 调用 connect() 之后得到的组件 ）
    • 特点： 专门与 redux 进行交互
// 容器组件
// withTodo 就是容器组件
const withTodo = connect()(Todo)

redux-thunk 使用

1. 安装：yarn add redux-thunk
2. 导入thunk    import thunk from 'redux-thunk'
3. 导入redux中的一个函数：`applyMiddleware`
4. 将redux-thunk中间件，作为参数传递给 applyMiddleware
5. 将 middlewares 传递给 createStore，作为它的第三个参数

import thunk from 'redux-thunk'

// 注意： logger 中间件应该放在后面
createStore(reducer, applyMiddleware(thunk))
  • 注意：redux-thunk对 action 做了处理，异步操作就是放在action中被处理的！！！
// 同步的action 
const increment = () => {
   return { type: 'INCREMENT' }
}
//异步的action  --要求返回一个函数,这个函数可以拿到dispatch
const incrementAsync = () => {
    //thunk会处理这个函数,将dispatch传入到函数中
  return function(dispatch) {
    setTimeout(() => {
        dispatch({ type: 'INCREMENT' })
    }, 2000)
  } 
}

注意: 标准的异步请求应该有三个状态, 1.等待 2.成功 3.失败

chrome的redux插件

// 1. 单独使用 redux 浏览器插件：
const store = createStore(
  reducer,
  initialState,
  // 单独使用 redux 浏览器插件
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

// 2. 和中间件配合使用

yarn add redux-devtools-extension -D

import { composeWithDevTools } from 'redux-devtools-extension'

createStore(reducer, initialState, composeWithDevTools(applyMiddleWare(logger)))

combineReducers

  • redux 中提供的一个 API
  • 作用：
    • 1 用来将多个 reducer 合并为一个 根reducer
    • 2 会影响 redux 中的状态值
  • 有了这个方法之后，将来 redux 中就可以有任意多个 reducer，这样，每个 reducer 只需要处理某个特定的状态即可。
  • 注意：每个 reducer 中的状态最终被全部合并到一个对象中。对象中的键就是参数对象的键
import { createStore, combineReducers} from 'redux'
const rootReducer = combineReducers({
  todos: reducer,
  filter:filter
})

const store = createStore( rootReducer )

store.getState() // 初始状态： { todos: [], filter: 'all' }

// 此时的应用的状态为：{ todos: [], filter: 'all' }
const rootReducer = combineReducers({
  todos: reducer,
  filter
})

// 该写法等价于上述combineReducers调用：
function rootReducer(state = {}, action) {
  return {
    todos: reducer(state.todos, action),
    filter: filter(state.filter, action)
  }
}

// 当我们使用 dispatch( 动作 ) 分发了一个动作的时候， redux 中所有的 reducer 全部都会执行一次
// 因为 redux 无法知道到底是哪个reducer来处理该状态，所以，所有的 reducer 全部都会被重新执行一次

运行步骤

1.创建store

2.将reducer传入store(此时reducer执行一次，进行数据初始化)

3.store提供了dispatch方法，去触发action，reducer函数执行（是因为reducer已经传入了store），更新数据并将数据传入store

4.react-redux中的connect方法，将 React 组件 和 Redux store 链接在一起，包装 React 组件。

（connect函数，第一个参数是state (state=>({count:state.count}) 是得到的store里面的数据，也就是reducer中return出来的最新数据（state.count);

第二个参数{action中的函数名}底层是，用了store中的dispatch方法，触发action.

function inc(num){

   dipatch(inc(num))

   } ）

5.在 React 组件中，通过 props 获取到 Redux store 中的state。

在根组件App中，引入Provider import {Provider} from ‘react-redux’

包裹其他的组件和结构啊,包裹的同时,传递store对象 ，要包裹容器组件，容器组件拿到store对象，利用connect将store和react显示组件连接，

Loving&Living
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解 redux
geohuz的博客
12-10 1686
redux是当下流行的web前端所使用的一个状态管理架构。它本身是一个独立的构造，没有与任何其它库的耦合。由于reactjs的流行, 它自然而然的成为了react状态管理的延伸架构。 本文不打算讨论redux的优点以及细节, 只是想从纯粹的设计角度去理解redux状态管理的模式。概览redux把状态管理抽象成3个要素, action, reducer, store。action是状态变化的描述性数据
Redux状态管理
进击的程序猿
08-14 1323
Redux 资料 react-redux流程与实现分析 《看漫画，学 Redux》 —— A cartoon intro to Redux Redux 中文网 React 实践心得：react-redux 之 connect 方法详解 解读redux工作原理 React 是构建 UI 的库，只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。 有两个方面，它没涉及 1 代码结...
qt插件开发框架搭建_前端服务开发体验 – 前端服务框架搭建
weixin_39750410的博客
11-20 432
前端的基本概念在软件架构和程序设计领域，前端是软件系统中直接和用户交互的部分，而后端控制着软件的输出。将软件分为前端和后端是一种将软件不同功能的部分相互分离的抽象。 前端的开发语言HTML：即超文本标记语言，是用来描述网页的一种语言，与编程语言不通，标记语言用来记录信息而非执行逻辑处理，HTML语言的内容被各类标签所包裹。JavaScript：JavaScript是一种直译式的脚本语言，是一种动态...
redux 使用react-redux插件
weixin_43294560的博客
06-07 303
用来降低redux的耦合度和使得代码更简洁 1、安装 cnpm install --save react-redux 2、index.js中改变监听订阅 import {BrowserRouter} from 'react-router-dom' ReactDOM.render( <Provider store={store} > <App /> </Provider> , document.getElementById
Redux 源码解析
purpose的博客
11-02 2004
Redux 源码解析闲谈ReduxRedux 源码结构工具函数CreateStore 闲谈 好些个日子没有写博客了，脑子里头想着有好些事情该干的该写的，但平日里就又陷入实验室与课程所带来无穷的琐事中了。偶尔偷得闲，还是写两篇罢，老是囤在笔记里头日晒不着的，眼瞅着就要发霉生虫了。 Redux Redux源码的设计简介明白，拢共加起来也不到千行，注释写的也清清楚楚，只要心里头对于Redux的设计理念有...
Redux 介绍
03-27
详细介绍react redux使用，参考redux的数据流动、reducer、store、view的交互
简单介绍react redux的中间件的使用
08-27
主要介绍了简单介绍redux的中间件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
让Vue也可以使用Redux的方法
08-27
主要介绍了让Vue也可以使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ReactNative中使用Redux架构总结
08-28
本篇文章主要介绍了ReactNative中使用Redux架构总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
记录一篇关于redux-saga的基本使用过程
10-18
主要介绍了记录一篇redux-saga的基本使用过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Redux：优点和缺点
geek word
11-29 3840
文章目录使用 Redux：优点和缺点什么是 Redux？什么时候使用 Redux？Redux 架构使用 Redux 的优势1. Redux 使状态可预测2. Redux 是可维护的3. Redux 调试简单4.性能优势5.易于测试6.状态持久化7.服务端渲染何时不选择 Redux结论 使用 Redux：优点和缺点 什么是 Redux？ Redux 可以定义为一个开源 JavaScript 库，用于管理应用程序状态。React 使用 Redux 来构建用户界面。它由Dan Abramov和Andrew Cl.
Redux详解
个人学习笔记
02-01 2221
1. redux概述 redux是一个用于JavaScript状态容器，提供可与预测化的状态。 redux可以让你构建一致化的应用，运行不同的环境（客户端，服务器，原生应用），并且易于测试。 redux除了与react一起使用外，还支持其他界面库，而且它体积小（只有2KB） 2. redux组成 3. 实现过程 实现点击A组件+号按钮，B页面数字++ 4. 总结 本篇分享是我边看视频边操作再加上文档整理出来一些东西，作为自己的学习笔记，前端小白还未在实际项目运用过，有问题可以提出一起讨论~ ...
Redux 三大原则
weixin_33866037的博客
01-17 560
2019独角兽企业重金招聘Python工程师标准>>> ...
Redux 中间件
qt的博客
02-10 200
中间件概念 什么是中间件 中间件本质是就是一道函数，redux允许我们通过中间件的方式扩展和增强redux的应用，体现在action的处理逻辑上， 加载中间件之后，action会先被中间件处理，中间件在返回给reducer 开发redux的中间件 源码地址：https://github.com/qifutian/learngit/tree/main/redux%E5%8F%8A%E4%B8%AD%E9%97%B4%E4%BB%B6/react-redux-guide redux的中间件本质是一道函数，
看了很多redux-thunk的文章，这个最直接
10-18 1532
https://segmentfault.com/q/1010000008163213/a-1020000008164225
Redux专题
qt的博客
02-10 105
学习目标 Redux核心 React + redux redux的中间件 开发redux中间件 Redux综合案例 1. Redux核心 1.1 Redux介绍 JavaScript状态容器，提供可预测化的状态管理 1.2 Redux 核心概念及工作流程 1.3 Redux 案例 实现一个计数器案例 思路：在页面中显示一个数值，数值初始是0，会有两个按钮，加和减，通过按钮加减数值，使用redux实现 创建store对象 通过reducer存放store，是一个函数的形式，名称可以任意 以一个对象
redux使用教程一 ——实现计数器
one_four_two的博客
01-19 859
文章目录安装概念介绍actionreducer 安装 安装稳定版redux：cnpm install --save redux 安装redux绑定库和开发者工具： cnpm install --save react-redux cnpm install --save-dev redux-devtools 概念介绍 action action：是一个JavaScript对象，action 内必须使...
P06:Chrome插件 Redux-DevTools 用来调试Redux数据
wgchen
12-14 1144
Redux基础阐述如何配置Redux Dev ToolsChrome插件 Redux-DevTools – Redux调试工具 阐述 在前面的文章中已经制作了Redux中state仓库，也可以从仓库中取出数据了。 接下来我们需要在控制台调试这些仓库里的数据，需要使用 Redux DevTools。 这是一个Chrome插件，专门用来调试Redux数据的，安装这个需要你科学的上网，才可以安装下来。 Chrome插件 Redux-DevTools – Redux调试工具 安装完成后，你在控制台中就可以看到Red
使用Redux DevTools浏览器插件调试redux
热门推荐
applebomb的专栏
02-08 2万+
使用Redux DevTools浏览器插件调试redux与redux的Devtools模块不同，该工具主要依赖浏览器插件完成。模式也比Devtools简单点。step1 下载插件Chrome地址（360极速模式也可以用）： https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfiblj
react-redux 官网
最新发布
11-14
根据提供的引用内容，React-Redux是一个将Redux与React结合使用的官方库。它提供了一种将Redux store与React组件连接起来的方式，使得组件可以访问store中的状态并对其进行操作。React-Redux还提供了一些高级特性，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值