React从入门到放弃之前奏(3)：Redux简介
安装
npm i -S redux react-redux redux-devtools
概念
在redux中分为3个对象：Action、Reducer、Store
Action
- 对行为（如用户行为）的抽象
- Action 就是一个普通 JavaScript 对象。如：
{ type: 'ADD_TODO', text: 'Go to swimming pool' }(其中type字段是约定也是必须的) - 作为Reducer的参数
Reducer
- 一个普通的函数，用来修改store的状态。
- 函数签名：
(currentState,action)=>newState- 在 default 情况下返回currentState
Object.assign({},state, { visibilityFilter: action.filter })(第一个参数不能为state) 等价于ES7的{ ...state, ...newState }
- redux 的 combineReducers 方法可合并reducer
Store
- 代表数据模型，内部维护了一个state变量
- 两个核心方法，分别是getState、dispatch。前者用来获取store的状态（state），后者用来修改store的状态
- createStore(reducer) 可创建Store
redux示例：
import { createStore } from 'redux'
// reducer
function counter(state = , action) {
switch (action.type) {
case 'INCREMENT':
return state +
default:
return state
}
}
// state
let store = createStore(counter); // 会调用
// 监听
store.subscribe(() =>
console.log(store.getState())
);
// 调用reducer
store.dispatch({ type: 'INCREMENT' });react-redux
react的需求：
- 数据总是单向从顶层向下分发的
- 组件之间的沟通通过提升state：子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调
- state越来越复杂：单页应用的发展导致。包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。
react-redux 将react组件分为2种：展示组件 和 容器组件
展示组件
描述如何展示：负责UI样式的展示
- 数据来源：props
- 数据修改：通过props的回调函数
- 不直接使用redux
容器组件
描述如何运行：负责数据获取 和 状态更新
- 数据来源：redux state
- 数据修改：redux 派发action
- 直接使用redux
react-redux 只有2个API：Provider 和 connect
Provider
<Provider store>
- 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
- 接收Redux的store作为props，内部通过context对象传递给子孙组件上的connect
connect
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)
作用：连接React组件与 Redux store
mapStateToProps(state, ownProps) : stateProps：
- 将 store 中的数据作为 props 绑定到组件上。
- 当 state 变化，或者 ownProps 变化的时候，mapStateToProps 都会被调用，计算出一个新的 stateProps
mapDispatchToProps(dispatch, ownProps): dispatchProps：将 dispatch(action) 作为 props 绑定到组件上
mergeProps：指定 stateProps 以及 dispatchProps 合并到 ownProps 的方式。（默认使用Object.assign）
connect是个高阶组件（HOC）大致源码：
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
return function wrapWithConnect(WrappedComponent) {
class Connect extends Component {
constructor(props, context) {
this.store = props.store || context.store
this.stateProps = computeStateProps(this.store, props)
this.dispatchProps = computeDispatchProps(this.store, props)
this.state = { storeState: null }
// 合并stateProps、dispatchProps、parentProps
this.updateState()
}
shouldComponentUpdate(nextProps, nextState) {
// 进行判断，当数据发生改变时，Component重新渲染
if (propsChanged || mapStateProducedChange || dispatchPropsChanged) {
this.updateState(nextProps)
return true
}
}
componentDidMount() {
this.store.subscribe( () => this.setState({ storeState: this.store.getState() }) )
}
render() {
return (
<WrappedComponent {...this.nextState} />
)
}
}
return Connect;
}
}react-redux示例：
import React, { Component } from 'react';
import { createStore, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
function clickReduce(state = { todo: }, action) {
switch (action.type) {
case 'click':
return Object.assign({}, state, { todo: state.todo + });
default:
return state;
}
}
let store = createStore(clickReduce);
class Counter extends Component {
render() {
return (
<div>
<div>{this.props.todo}</div>
<button onClick={this.props.clickTodo}>Click</button>
</div>
)
}
}
// 方式1：
export default connect(state => ({ todo: state.todo }),
dispatch => ({ clickTodo: () => dispatch({ type: 'click' }) }))(Counter)
// 方式2：
export default connect(state => ({ todo: state.todo }),
dispatch => bindActionCreators({ clickTodo: () => ({ type: 'click' }) }, dispatch))(Counter);在redux中，我们只能dispatch简单的action对象。
对应的在react-redux中，我们只能定义同步的reducer方法。
下节将介绍在react-redux如何定义异步方法。让其更加适用于生产环境。