Redux学习笔记(二):在React中使用

前言

Redux 并不是只能在 React 中使用,它还可以在Angular, Ember, jQuery中使用,但是它在 React 中表现得很好。

React-Redux 提供了几个 API,方便我们将它们结合在一起。

三类组件

官方文档推荐将组件分为以下三种:

  • Presentational Components(展示组件)
  • Container Components(容器组件)
  • Other Components(其他组件)

Presentational Components

展示组件只负责将父组件传递进来的 props 按照需求展示出来。

Container Components

容器组件负责将展示组件与 Redux 连接起来。本质上,一个容器组件就是通过手动使用store.subscribe()来访问 Redux 的 state 树,并将其传入展示组件渲染。 React-Redux 为我们提供了 connect() 函数,这是我们更便利的完成上述操作。

我们需要定义一个 叫做mapStateToProps的特殊函数,它的接收 Redux 的 state 作为参数,返回展示组件做需要的 state。

1
2
3
4
5
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
};
};

除了访问 state,容器组件还能 dispatch actions,我们可以定义一个 mapDispatchToProps 函数,用来接收 dispatch()方法,然后返回我们需要注入给展示组件的部分dispatch()方法。

1
2
3
4
5
6
7
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id));
}
};
};

可以看出,mapStateToPropsmapDispatchToProps 是非常相似的,就是将 Redux 中的 state 和 dispatch 筛选一下,只返回我们需要的那一部分。

最后,使用connect()这个高阶组件,将 mapStateToPropsmapDispatchToProps 注入到展示组件,也就是将它们的返回值传递给展示组件的 props 中。

1
2
3
4
5
import { connect } from "react-redux";

const VisibleTodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList);

export default VisibleTodoList;

Other Components

第三类组件是将展示与逻辑混合在一起的组件。

传递 Store

所有的容器组件需要访问到 Redux 的 Store 才能订阅。我们不用将 Store 传入到每一个容器组件的 props 中,只需要使用一个叫做 <Provider>的 React-Redux 组件,它可以将 store 传入所有的容器组件,我们只用一次即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import todoApp from "./reducers";
import App from "./components/App";

const store = createStore(todoApp);

render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);