React-Redux 是一个为 React 封装的专用的库。
UI 组件
React-Redux 将所有组件分成两大类:UI 组件
(presentational component)和容器组件
(container component)。
UI 组件的特征:
- 只负责 UI 的呈现,不带有任何业务逻辑
- 没有状态(即不使用this.state这个变量)
- 所有数据都由参数(this.props)提供
- 不使用任何 Redux 的 API
const Title =
value => <h1>{value}</h1>;
容器组件
容器组件的特征:(与 UI 组件相反)
- 负责管理数据和业务逻辑,不负责 UI 的呈现
- 带有内部状态
- 使用 Redux 的 API
UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
一个组件既有 UI,又有业务逻辑:
外面是一个容器组件(负责与外部通信,将数据传给 UI 组件),里面包一个 UI 组件(渲染视图)
React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。
connect()
用于从 UI 组件生成容器组件。
import { connect } from 'react-redux'
// TodoList是 UI 组件
// VisibleTodoList 就是由 React-Redux 通过 connect 方法自动生成的容器组件
const VisibleTodoList = connect()(TodoList)
想要给上面的容器组件定义业务逻辑,需要给出以下信息:
- 输入逻辑:外部的数据(即state对象)如何转换为 UI 组件的参数。
- 输出逻辑:用户发出的动作如何变为 Action 对象,从 UI 组件传出去。
connect 方法的完整 API :
import { connect } from 'react-redux'
const VisibleTodoList = connect(
// mapStateToProps 负责输入逻辑,即将 state 映射到 UI 组件的参数(props)
mapStateToProps,
// mapDispatchToProps 负责输出逻辑,即将用户对 UI 组件的操作映射成 Action
mapDispatchToProps
)(TodoList)
mapStateToProps()
建立一个从(外部的)state 对象到(UI 组件的)props 对象的映射关系.
const mapStateToProps = (state) => {
return {
// 每一个键值对就是一个映射
// getVisibleTodos 可以从 state 算出 todos 的值
// todos 属性,代表 UI 组件的同名参数
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
getVisibleTodos
的例子,用来算出 todos:
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
default:
throw new Error('Unknown filter: ' + filter)
}
}
mapStateToProps 会订阅 Store,每当 state 更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。mapStateToProps 的第一个参数总是 state 对象,还可以使用第二个参数,代表容器组件的 props 对象。
// 容器组件的代码
// <FilterLink filter="SHOW_ALL">
// All
// </FilterLink>
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
使用ownProps作为参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染。
connect 方法可以省略 mapStateToProps 参数,那样的话,UI 组件就不会订阅 Store,就是说 Store 的更新不会引起 UI 组件的更新。
mapDispatchToProps()
用来建立 UI 组件的参数到 store.dispatch 方法的映射。它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。
当 mapDispatchToProps
是一个函数:
// 会得到 dispatch 和 ownProps(容器组件的props对象)两个参数
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
})
}
}
}
当 mapDispatchToProps
是一个对象:
const mapDispatchToProps = {
onClick: (ownProps) => {
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
}
}
mapDispatchToProps 的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出。
<Provider> 组件
connect 方法生成容器组件以后,需要让容器组件拿到 store对象,才能生成 UI 组件的参数。React-Redux 提供 Provider
组件,可以让容器组件拿到 store。
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
// App的所有子组件默认都可以拿到 store
<App />
</Provider>,
document.getElementById('root')
)
Provider
原理是 React 组件的 context 属性:
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
}
}
render() {
return this.props.children
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}
上面代码中,store 放在了上下文对象 context 上面。然后,子组件就可以从 context 拿到 store,代码大致如下。
class VisibleTodoList extends Component {
componentDidMount() {
const { store } = this.context
this.unsubscribe = store.subscribe(() =>
this.forceUpdate()
)
}
render() {
const props = this.props;
const { store } = this.context
const state = store.getState()
// ...
}
}
VisibleTodoList.contextTypes = {
store: React.PropTypes.object
}
React-Redux 自动生成的容器组件的代码,就类似上面这样,从而拿到 store。
实例:计数器
纯计数器 UI 组件
class Counter extends Component {
render() {
// UI 组件有两个参数:value 和 onIncreaseClick
// value 需要从state计算得到
// onIncreaseClick 需要向外发出 Action
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
定义 value 到 state 的映射(mapStateToProps()),以及 onIncreaseClick 到 dispatch 的映射(mapDispatchToProps()):
function mapStateToProps(state) {
return {
value: state.count
}
}
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
// Action Creator
const increaseAction = { type: 'increase' }
使用 connect 方法生成容器组件:
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
定义这个组件的 Reducer:
// Reducer
function counter(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case 'increase':
return { count: count + 1 }
default:
return state
}
}
生成 store 对象,并使用 Provider 在根组件外面包一层:
import { loadState, saveState } from './localStorage';
const persistedState = loadState();
const store = createStore(
todoApp,
persistedState
);
store.subscribe(throttle(() => {
saveState({
todos: store.getState().todos,
})
}, 1000))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
React-Router 路由库
const Root = ({ store }) => (
// 使用 Provider 在 Router 外面包一层
<Provider store={store}>
<Router>
<Route path="/" component={App} />
</Router>
</Provider>
)