DaMeng

ReactRedux

发表于 更新于 分类于 ，

1 概述

ReactRedux 是 Redux 官方为 React 提供的绑定库，让我们可以在 React 中更方便的使用 Redux。

在 ReactRedux 中，用户只需要提供 UI 组件，ReactRedux 会自动生成容器组件来管理状态。

2 怎么使用

2.1 安装

ReactRedux 基于 redux，所以需要将 redux 一并安装。

1
npm install redux react-redux

2.2 使用

2.2.1 Provider 组件

Provider 是 ReactRedux 提供的组件，这个组件能够连接 Store ，并可以将 Store 提供给所有的子组件。

Provider 内部使用 React 的 Context 机制使 Store 在子组件内共享。

2.2.1.1 语法

1
<Provider store>

2.2.1.2 示例

使用 Provider 把 React 根组件包裹起来，即可将 Store 专递给所有子组件

1
2
3
4
5
6
7
8
9
10
11
import React from "react";
import TodoList from "./TodoList.js";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  rootEl
)

2.2.2 connect 方法

connect 是 ReactRedux 提供的方法，能够将 UI 组件和 ReduxStore 连接起来，并返回一个新的、包裹了 UI 组件的、可以管理 UI 组件状态的容器组件。

2.2.2.1 语法

1
function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

  • mapStateToProps?: (state, ownProps?) => Object

    • 参数
      • state: 是全局的 ReduxStore
      • ownProps?: 容器组件的 props 属性
    • 返回值：会作为 UI 组件的 props 属性
    • 功能描述：
      • 通过 mapStateToProps 可以将 ReduxStore 中的数据映射到 UI 组件的 props 属性。
      • mapStateToProps 是 ReduxStore 的监听器，当 ReduxStore 更新时，就会触发 Ui 组件的重新渲染。不传递 mapStateToProps 时， UI 组件将不感知 ReduxStore 的更新。
      • 使用了参数 ownProps 后，当容器组件的 props 发生变化，会触发 UI 组件的更新。

  • mapDispatchToProps?: Object | (dispatch, ownProps?) => Object

    • 参数
      • dispatch: 即 ReduxStore.dispatch
      • ownProps？: 容器组件的 props 属性
    • 返回值
      • 函数类型时，返回值为 dispatch 和 UI 组件的 函数类型 props 的对应关系
      • 对象类型时，此对象为 dispatch 和 UI 组件的 函数类型 props 的对应关系
    • 功能描述
      • ​ 通过 mapDispatchToProps 可以将 dispatch 和 UI 组件的 函数类型 props 对应起来

  • mergeProps?: (stateProps, dispatchProps, ownProps) => Object

    • 参数
      • stateProps：mapStateToProps 返回值
      • dispatchProps： mapDispatchToProps 返回值
      • ownProps：容器组件的 props 属性
    • 返回值
      • 返回值会作为 UI 组件的 props 属性
    • 功能描述
      • 用来自定义 UI 组件的 props 属性

  • options?: Object

    • 参数
      • [pure = true] (Boolean): 为 true 时，connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果，避免不必要的更新，前提是当前组件是一个“纯”组件，它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。
      • [withRef = false] (Boolean): 如果为 true，connector 会保存一个对被包装组件实例的引用，该引用通过 getWrappedInstance() 方法获得。默认值为 false。

2.2.2.2 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from "react";
import { connect } from "react-redux";
import { updateInputValueAction, addListDataAction } from "./store/actions";

function TodoList(props) {
	return (
		<div>
			<input type="text" value={props.inputValue} onChange={props.onInputChange} />
			<button onClick={props.addListData}>submit</button>
		</div>
	);
}

const mapStateToProps = (state, ownProps) => {
	console.log("hh", ownProps);
	return {
		inputValue: state.todoList.inputValue,
	};
};

const mapDispatchToProps = (dispatch) => {
	return {
		onInputChange: (e) => {
			dispatch(updateInputValueAction(e.target.value));
		},
		addListData: () => {
			dispatch(addListDataAction());
		},
	};
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);