前言
Redux 是一个很流行的状态管理库，但单纯使用 Redux 的话可能需要写很多重复的代码，而 react-redux 这个库就是用来简化 Redux 在 React 中的使用的。其中 react-redux 中的 Provider 和 connect 组件是非常核心的组件，下面我们来看一下它们的源码解析以及实践。
Provider 组件
Provider 组件是 react-redux 中提供的最核心的组件之一，它用来将 Redux 的 store 注入整个应用的组件树中。
实现方式
Provider 组件最关键的实现方式是利用 React 的 Context 特性。Provider 应该被嵌套在组件树的最顶层，并接收一个 prop——一个名为 store 的 Redux store。
在 Provider 的 construct 中，它会调用 React 的 createContext 方法创建一个 context，然后将 store 放到 context 的 value 中，以便让 connect 中的子组件可以将 state 映射到 props 上。
// javascriptcn.com 代码示例
import React from 'react'
import { ReactReduxContext } from './Context'
class Provider extends React.Component {
constructor(props) {
super(props)
this.store = props.store
}
render() {
return (
<ReactReduxContext.Provider value={{ store: this.store }}>
{this.props.children}
</ReactReduxContext.Provider>
)
}
}
export default Provider实践
我们可以通过下面的代码使用 Provider，将 store 传入整个应用：
// javascriptcn.com 代码示例
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './App'
import rootReducer from './reducers'
const store = createStore(rootReducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)connect 组件
connect 组件是 react-redux 提供的负责将 Redux store 中的数据和 React 用于渲染的 props 进行绑定的方法。
实现方式
connect 函数接收两个参数 mapStateToProps 和 mapDispatchToProps。我们可以通过传入这两个函数实现将 state 映射到组件的 props 上。
对于 mapStateToProps 函数，它接收当前的 state，并返回一个对象。这个对象就是我们希望变成 props 的 state 属性。类似的，mapDispatchToProps 函数接收 dispatch 函数并返回一个对象，包含了传递给子组件的 actionCreators。最后，connect 函数会将这些值注入到子组件中，在组件渲染时使用这些 props。
// javascriptcn.com 代码示例
function connect(mapStateToProps, mapDispatchToProps) {
return function wrapWithConnect(WrappedComponent) {
class Connect extends React.Component {
render() {
return (
<ReactReduxContext.Consumer>
{({ store }) => (
<WrappedComponent
{...this.props}
{...mapStateToProps(store.getState(), this.props)}
{...mapDispatchToProps(store.dispatch, this.props)}
/>
)}
</ReactReduxContext.Consumer>
)
}
}
return Connect
}
}
export default connect实践
我们可以通过下面的代码来使用 connect，将 state 和 dispatch 映射到组件的 props 中：
// javascriptcn.com 代码示例
import React from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from './actions'
class Counter extends React.Component {
render() {
const { count, increment, decrement } = this.props
return (
<div>
<p>{count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
)
}
}
const mapStateToProps = state => ({
count: state.count
})
const mapDispatchToProps = {
increment,
decrement
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter)总结
Provider 和 connect 组件都是 react-redux 中非常核心的组件，通过它们我们可以更方便地使用 Redux。对于 Provider，它主要是将 store 注入整个应用的组件树中；对于 connect，它主要是将 Redux store 中的数据和 React 用于渲染的 props 进行绑定。使用 Provider 和 connect，我们可以更便捷地使用 Redux，大大减少了编写重复代码的工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6527dbc87d4982a6eba7231f