目录路由中使用redux路由reducerRedux拓展state拓展action拓展静态action动态action异步action异步action中间件路由中使用redux 在路
在路由中使用redux只需要两步:
注意:路由规则渲染组件的时候,路由规则组件只负责向组件传递路由相关的数据,其他的数据(如store数据)是不会传递的
所以Route渲染的组件,想接收store中的数据,我们只能采用第二种方式,渲染处理后的组件。
路由也提供了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>
{}
{}
<Route path="/" component={DealApp}></Route>
</HashRouter>
)
// 2 在provider中,渲染路由规则
render(<Provider store={store}>{routes}</Provider>, app)
我们目前操作的state都是一个值类型的数据
因此我们可以直接操作这个state数据
如果state是一个引用类型的数据,我们就不能在state上直接操作了
我们要先定义新对象,在新对象上操作数据,最终与原来的state合并成新对象,并返回这个新对象作为新的state数据
我们可以通过es6提供的Object.assign方法来合并对象,
由于后面的数据会覆盖前面的数据,因此我们将新对象放在state对象之后。
action是一个通信的对象,里面携带消息数据
我们目前定义的action对象都是一个静态的action对象,
也就是说action中的数据是固定的
适用性会收到限制。为了提高适用性,我们可以定义动态action
动态action是一个函数,可以接收参数,我们根据参数的不同,返回不同的action,这样就增强了action对象的适用性了
到目前为止,我们所发送的action都是同步的,因为在action中没有异步的操作
异步action适用场景:
react是一个视图层的框架,但是我们有时候将请求放在组件中,就会让组件做了太多数据业务逻辑方面的事情了,有时候我们想将这部分请求放在action实现,此时这个action就是一个异步的action
异步action与同步action相比:
redux-thunk是异步action中间件
我们可以通过applyMiddleware方法,将其安装在redux中,
该方法参数就是中间件,返回一个新的方法,用来拓展createState方法,会得到一个新的创建store方法,此时我们用这个新的方法创建store,新的store就具有了异步aciton的功能。
到此这篇关于React路由中的redux和redux知识点拓展的文章就介绍到这了,更多相关React redux和redux内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React路由中的redux和redux知识点拓展
本文链接: https://www.lsjlt.com/news/166200.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0