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