React从入门到项目--第八天（redux进阶）

墨蓝 2023-06-08 14:58 5阅读 0赞

单纯的使用上redux，会出现一个小问题，就是说redux 与 react 组件的代码耦合度太高，这时候会显得代码很乱，这时候我们可以通过一些其他的手段来降低代码的耦合度，而且代码不够简洁。

### reacr-redux ###

**安装**

npm install --save react-redux

这时候我们可以引入一个react的插件库，react-redux，这是一个react的插件库，也就是说react-redux在脱离了react的时候是无法进行正常工作的，这个库的作用就是专门为了简化在react项目中的redux编码。react-redux还将所有的组件进行了分类，将主要进行界面设计的组件成为UI组件，主要进行逻辑处理的组件成为容器组件

**UI组件**

ui组件只负责ui界面的设计呈现，不带有任何的业务逻辑，通过props进行数据的接收，在UI组建中，不存在任何关于store的API，一般保存在components文件夹下。

**容器组件**

容器组件主要进行管理数据和业务逻辑，不负责 UI 的呈现，在容器组件中经常调用store的API，而且通常将这类组件保存在containers文件夹下。

**相关API**

Provider是常用的react-redux的API，它的作用就是让所有组件都获得state，同样它还可以完成对页面的重绘，也就是说不用再去使用subscribe，进行更新，这时候只需要使用Provider把App包起来即可，不同的是这时候要把store转交给Provider进行整体的管理，而不是交给App。

connect用于包装UI组件生成容器组件，什么意思呢，就是说说通过connct来进行把UI组件变为容器组件，只需要传入相应的state数据以及传入的相关函数。这时候会返回一个函数，这个函数需要传入的参数是一个UI组件，函数返回的是一个容器组件。容器组件内即可便利的使用store，将代码变得简单。

import { connect } from 'react-redux' 
    connect( 
        mapStateToprops, 
        mapDispatchToProps 
    )(Counter)

### redux实现异步 ###

在进行一步的操作的时候，往往是在react中进行的，但是在真正的项目中，需要在redux中进行，但是redux本身是不支持异步的，这时候就需要依赖于一个全新的库了(redux-thunk)

**安装**

npm install --save redux-thunk

这时候的store.js的写法应该是这样的：

import {createStore, applyMiddleware} from 'redux'
    import thunk from 'redux-thunk'
    // 根据 counter 函数创建 store 对象
    const store = createStore(
        counter,
        applyMiddleware(thunk) // 应用上异步中间件
    )

这时候只需要在actions中书写异步代码即可。

export const incrementAsync = number => {
        return dispatch => {
            setTimeout(() => {
                dispatch(increment(number))
            }, 1000)
        }
    }

### redux调试工具 ###

在项目运用上redux的时候，项目组件已经不存在state了，也就无法查看相应的数据了，这时候可以安装google插件redux-devtools，但是只是单纯的安装了插件的话，插件是不起作用的。

还需要安装一个相关的库redux-devtools-extension，这时候需要在引入库中的composeWithDevTools之后进行store的配置，才能够在浏览器中正常使用插件。

import {createStore,applyMiddleware} from 'redux'
    import {counter} from './reducers'
    import thunk from 'redux-thunk'
    import { composeWithDevTools } from 'redux-devtools-extension'
    
    const store = createStore(
        counter,
        composeWithDevTools(applyMiddleware(thunk))
    );
    
    export default store