React路由中的redux怎么使用

发布时间:2022-08-29 11:38:35 作者:iii
来源:亿速云 阅读:117

这篇“React路由中的redux怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React路由中的redux怎么使用”文章吧。

路由中使用redux

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

注意:路由规则渲染组件的时候,路由规则组件只负责向组件传递路由相关的数据,其他的数据(如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中间件

redux-thunk是异步action中间件

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

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

以上就是关于“React路由中的redux怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 在React中如何使用Redux
  2. react-redux基本使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react redux

上一篇:Jmeter的接口怎么测试并实现业务闭环

下一篇:怎么用Android实现底部滚轮式选择弹跳框

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》