React中使用Redux (二) - 通过react-redux库连接React和Redux

react-redux库使用Redux

上一篇文章演示React中直接使用Redux的使用过程是十分繁琐的, 并且有许多重复代码

但是实际上redux官方帮助我们提供了 react-redux 的库，这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效

这篇我们就可以使用react-redux库将上一篇文章的计数器案例进行优化

**安装react-redux:

yarn add react-redux

或

npm i react-redux

**

使用react-redux这个库分成两个步骤

步骤一: react-redux库只需要提供一次store, 我们在index.js中为App根组件提供store, 方式如下:

// index.jsimport React from'react';import ReactDOM from'react-dom/client';import App from'./App';// 引入Provider和storeimport{ Provider }from'react-redux';import store from'./store';const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(// 在Provider声明要提供哪一个store<Provider store={store}><App/></Provider>);

步骤二: 在要使用store的地方, 通过

connect

函数将组件和store连接起来

connect函数是一个高阶函数, 该函数返回一个高阶组件, 而高阶组件又是一个函数, 所以我们通常见到connect函数是这样调用的

connect(fn1, fn2)(组件)

store中的状态可能是非常多的, 而connect函数的参数的作用是, 要将store中的哪些数据或者方法映射过去, 我们就可以根据自己的需求, 决定映射过去哪些数据, 而不是直接将整个store映射过去(使用方式如下)

connect高阶函数接收两个参数:

参数一: 接收一个函数fn1, 要求fn1返回一个对象, 对象中存放要映射的数据; 同时在回调fn1函数时, 会将state传到fn1中

映射到组件中的数据是通过

this.props

获取的

import React,{ PureComponent }from'react'import{ connect }from'react-redux'exportclassAboutextendsPureComponent{render(){// 在props中获取到映射过来的数据const{ counter }=this.props

    return(<div><h2>About</h2><h2>当前计数:{counter}</h2></div>)}}// 回调mapStateToProps时会传递过来stateconstmapStateToProps=(state)=>({// 表示将counter数据映射过去, 当然还可以映射其他的数据counter: state.counter
})// 表示将数据映射到About组件中exportdefaultconnect(mapStateToProps)(About)

参数二: 参数二也是接收一个参数fn2, 要求fn2也是返回一个对象, 对象中的属性同样会映射到props中去; 不同于fn1的是, 该对象中存放的全部都是函数; 并且在回到时将dispatch传入到fn2中

我们一般在参数二中映射的是dispatch派发action的操作

import React,{ PureComponent }from'react'import{ connect }from'react-redux'import{ changeNumAction }from'../store/actionCreators'exportclassAboutextendsPureComponent{changeNum(num){// 调用映射到props的方法this.props.changeNumber(num)}render(){const{ counter }=this.props

    return(<div><h2>About</h2><h2>当前计数:{counter}</h2><button onClick={()=>this.changeNum(10)}>+10</button><button onClick={()=>this.changeNum(-10)}>-10</button></div>)}}constmapStateToProps=(state)=>({counter: state.counter
})// 回调mapDispatchToProps时会传递过来dispatchconstmapDispatchToProps=(dispatch)=>({// 表示映射到组件props的方法changeNumber(num){dispatch(changeNumAction(num))}})// 表示将数据映射到About组件中exportdefaultconnect(mapStateToProps, mapDispatchToProps)(About)