React路由中的redux和redux知识点拓展

目录
  • 路由中使用redux
  • 路由reducer
  • Redux拓展
    • state拓展
    • action拓展
    • 静态action
    • 动态action
    • 异步action
    • 异步action中间件

路由中使用redux

在路由中使用redux只需要两步：

  • 第一步 在路由策略组件中（如HashRouter），渲染Route组件，并在该Route路由规则组件中，引入connect方法处理后的应用程序组件
  • 第二步 在Provider组件中，渲染路由策略组件（如HashRouter）。

注意：路由规则渲染组件的时候，路由规则组件只负责向组件传递路由相关的数据，其他的数据（如store数据）是不会传递的

所以Route渲染的组件，想接收store中的数据，我们只能采用第二种方式，渲染处理后的组件。

路由reducer

路由也提供了reducer方法，我们需要引入react-router-redux

提供了routerReducer，表示路由的reducer

我们也想添加到应用中，我们就要使用combineReducers方法添加多个reducer

参数是对象：

key表示state名称（命名空间）

value表示reducer

相当于vuex中的module切割模块

此时合并后，在组件中，访问state数据，要携带命名空间

// 拓展组件
let DealApp = dealFn(App);
let DealHome = dealFn(Home);
let DealList = dealFn(List);
let DealDetail = dealFn(Detail);
// 第二步 确定渲染方式
let routes = (
<HashRouter>
{/*<App></App>*/}
{/* 1 通过路由规则，渲染处理后的应用程序 */}
<Route path="/" component={DealApp}></Route>
</HashRouter>
)
// 2 在provider中，渲染路由规则
render(<Provider store={store}>{routes}</Provider>, app)

Redux拓展

state拓展

我们目前操作的state都是一个值类型的数据

因此我们可以直接操作这个state数据

如果state是一个引用类型的数据，我们就不能在state上直接操作了

我们要先定义新对象，在新对象上操作数据，最终与原来的state合并成新对象，并返回这个新对象作为新的state数据

我们可以通过ES6提供的Object.assign方法来合并对象，

由于后面的数据会覆盖前面的数据，因此我们将新对象放在state对象之后。

action拓展

action是一个通信的对象，里面携带消息数据

静态action

我们目前定义的action对象都是一个静态的action对象，

也就是说action中的数据是固定的

适用性会收到限制。为了提高适用性，我们可以定义动态action

动态action

动态action是一个函数，可以接收参数，我们根据参数的不同，返回不同的action，这样就增强了action对象的适用性了

异步action

到目前为止，我们所发送的action都是同步的，因为在action中没有异步的操作

异步action适用场景：

react是一个视图层的框架，但是我们有时候将请求放在组件中，就会让组件做了太多数据业务逻辑方面的事情了，有时候我们想将这部分请求放在action实现，此时这个action就是一个异步的action

异步action与同步action相比：

  • 同步action（例如动态action），是一个函数，返回值是一个对象（就是发布的aciton对象）
  • 异步aciton，是一个函数，返回值是一个函数
  • 返回值函数中，参数是dispatch
  • 我们可以在返回值函数中，实现异步操作，并在操作完成的时候，通过参数dispatch发布同步的action消息。
  • redux默认不支持异步，想使用异步action就要安装中间件

异步action中间件

redux-thunk是异步action中间件

我们可以通过applyMiddleware方法，将其安装在redux中，

该方法参数就是中间件，返回一个新的方法，用来拓展createState方法，会得到一个新的创建store方法，此时我们用这个新的方法创建store，新的store就具有了异步aciton的功能。

到此这篇关于React路由中的redux和redux知识点拓展的文章就介绍到这了,更多相关React redux和redux内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React Redux使用配置详解

    React Redux使用配置详解

    目录 前言 redux三大原则 redux执行流程 redux具体使用 执行流程 redux使用流程 前言 在使用redux之前,首先了解一下redux到底是什么? 用过vue的肯定知道vuex,vuex是vue中全局状态管理工具,主要是用于解决各个组件和页面之间数据共享问题,对数据采用集中式管理,而且可以通过插件实现数据持久化 redux跟vuex类似,最主要的就是用作状态的管理,redux用一个单独的常量状态state来保存整个应用的状态,可以把它想象成数据库,用来保存项目应用中的公共数据

  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结

    目录 不使用 Redux 的写法 最底层的写法 React-Redux React-Redux 配合 connect 高阶组件 React-Rudex 配合 React Hooks Redux Toolkit 总结 Redux 是一种状态容器 JS 库,提供可预测的状态管理,经常和 React 配合来管理应用的全局状态,进行响应式组件更新. Redux 一般来说并不是必须的,只有在项目比较复杂的时候,比如多个分散在不同地方的组件使用同一个状态.对于这种情况,如果通过 props 层层传递,代码会

  • react redux及redux持久化示例详解

    react redux及redux持久化示例详解

    目录 一.react-redux 二.redux持久化 一.react-redux react-redux依赖于redux工作. 运行安装命令:npm i react-redux: 使用: 将Provider套在入口组件处,并且将自己的store传进去: import FilmRouter from './FilmRouter/index' import {Provider} from 'react-redux' import store from './FilmRouter/views/red

  • 详解React 和 Redux的关系

    详解React 和 Redux的关系

    目录 一.redux和react的关系 二.react多组件共享 三.redux的三个核心概念 1.store 2.action (动作) 3.reducer (纯函数) 总结 文档: Redux中文文档 Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管理容器. 一.redux和react的关系 Redux并不只为react应用提供状态管理, 它还支持其它的框架. React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案.因

  • react redux中如何获取store数据并将数据渲染出来

    react redux中如何获取store数据并将数据渲染出来

    目录 前景提要 1.创建仓库骨架并书写初始代码 2.正式开始 3.store 数据获取方法(可略过) 4.数据的获取与展示 前景提要 如果不了解基础的话 ----- 点击此处 本文着重实现效果,不会讲太多原理问题 未使用 react-redux 管理工具 1.创建仓库骨架并书写初始代码 src 目录下创建 //store/index.js 代码 import { createStore } from 'redux'; import reducer from "./reducer" co

  • react router4+redux实现路由权限控制的方法

    总体概述 一个完善的路由系统应该是这样子的,当链接到的组件是需要登录后才能查看,要能够跳转到登录页,然后登录成功后又跳回来之前想访问的页面.这里主要是用一个权限控制类来定义路由路由信息,同时用redux把登录成功后要访问的路由地址给保存起来,登录成功时看redux里面有没有存地址,如果没有存地址就跳转到默认路由地址. 路由权限控制类 在这个方法里面,通过sessionStorage判断是否登录了,如果没有登录,就保存一下当前想要跳转的路由到redux里面.然后跳转到我们登录页. import R

  • React与Redux之数组处理讲解

    本文将介绍一些常用的数组处理函数和语法,如reduce().filter().map().every().some().展开运算符.这些知识和React与Redux本身没有直接关系,但是本章的示例中包含了这些函数和语法的用法,我们正好可以在程序中学习它们.另外值得一提的是,reduce().filter().map()等函数的思想来自函数式编程,感谢JavaScript是一门函数式编程语言,让原本复杂的逻辑处理变得如此简单. reduce() 概述 reduce()方法接收一个函数作为累加器(a

  • 使用react+redux实现计数器功能及遇到问题

    使用react+redux实现计数器功能及遇到问题

    Redux,本身就是一个单纯的状态管理者,我们不追溯它的历史,从使用角度来说:它提供一个全局的对象store,store中包含state对象用以包含所有应用数据,并且store提供了一些reducer方法.这些方法可以自定义,使用调用者得以改变state的值.state的值仅为只读,如果需要更改则必须只能通过reducer. Redux 核心对象:store 数据存储:state 状态更新提交接口:==dispatch== 状态更新提交参数:带type和payload的==Action== 状态

  • React路由中的redux和redux知识点拓展

    目录 路由中使用redux 路由reducer Redux拓展 state拓展 action拓展 静态action 动态action 异步action 异步action中间件 路由中使用redux 在路由中使用redux只需要两步: 第一步 在路由策略组件中(如HashRouter),渲染Route组件,并在该Route路由规则组件中,引入connect方法处理后的应用程序组件 第二步 在Provider组件中,渲染路由策略组件(如HashRouter). 注意:路由规则渲染组件的时候,路由规则

  • react组件中的constructor和super知识点整理

    react组件中的constructor和super知识点整理

    1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeofChild === 'function' , 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B.Child类调用时候( new Child() ),会优先执行,并且自动执行Child的constructor函数. constructor() { console.log('执

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 优雅的在React项目中使用Redux的方法

    或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-

  • React项目中使用Redux的 react-redux

    目录 背景 UI 组件 容器组件 connect() mapStateToProps() mapDispatchToProps() 组件 实例:计数器 背景 在前面文章一文理解Redux及其工作原理中,我们了解到redux是用于数据状态管理,而react是一个视图层面的库 如果将两者连接在一起,可以使用官方推荐react-redux库,其具有高效且灵活的特性 react-redux将组件分成: 容器组件:存在逻辑处理 UI 组件:只负责现显示和交互,内部不处理逻辑,状态由外部控制 通过redux

  • React路由鉴权的实现方法

    前言 上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你的项目能够有所帮助,本文借鉴了很多大佬的文章篇幅也是比较长的. 背景 单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面.虽然服务端做了进行接口的权限,但是每一个路由加载的时候都要去请求这个接口太浪费了.有时候是通过SESSIONID来校验登陆权限的. 在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的: 一.

  • 如何在React项目中优雅的使用对话框

    如何在React项目中优雅的使用对话框

    目录 背景 场景一 场景二 场景三 问题一:难以扩展 问题二:维护问题 问题的本质 对话框的本质 全局的状态管理的对话框 整体的架构 具体实现 Redux - reducer 存储 Redux - action 处理对话框的显示隐藏 Hook - useCommonModal 创建对话框-容器模块 对话框返回值处理 运行实例 总结 参考 背景 对话框在前端开发应用中,是一种非常常用的界面模式.对话框作为一个独立的窗口,常常被用于信息的展示,输入信息,亦或者更多其他功能.但是项目的使用过程中,在某

  • 在 React 项目中全量使用 Hooks的方法

    目录 前言 React Hooks useState useReducer 基础用法 进阶用法 useContext useEffect useLayoutEffect useRef useImperativeHandle useCallback useMemo React Redux Hooks useSelector useDispatch React Router Hooks useHistory useLocation useParams useRouteMatch 参考 结语 前言 此

  • TypeScript在React项目中的使用实践总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

随机推荐