React-redux深入理解

const store = createStore(reducer);

getState

dispatch

subscribe

// createStore 函数实现
const createStore = (reducer) => {
let state;
let listeners = [];

const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
}
const subscribe = (listener) => {    // listener 就是一个要执行的函数
listeners.push(listener);
return () => {  // 采用柯里化方式注销监听器，用法：store.subscribe(listener)();
listeners = listeners.filter(l => l != listener);
}
}

dispatch({});   // 初始化state

return { getState, dispatch, subscribe }
}

dispatch

reducer

getState

// 定一个 reducer
function reducer (state, action) {
/* 初始化 state 和 switch case */
}

// 生成 store
const store = createStore(reducer)

// 监听数据变化重新渲染页面，即更新状态的过程
store.subscribe(() => renderApp(store.getState()))

// 首次渲染页面
renderApp(store.getState())

// 后面可以随意 dispatch 了，页面自动更新
store.dispatch(...)

一、背景：React 中父组件 context 的作用，用以摆脱状态提升

// 父组件
class Index extends Component {
// 提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证
static childContextTypes = {
store: PropTypes.object
}

// 一个组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context
getChildContext () {
return { store }
}

render () {
return (
<div>
<Header />
<Content />
</div>
)
}
}

// 子组件
class Header extends Component {
// 声明想要的 context 里面的哪些状态，以便通过 this.context 进行访问
// 子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型
static contextTypes = {
store: PropTypes.object
}

constructor () {
super()
this.state = { themeColor: '' }
}

componentWillMount () {
this._updateThemeColor()
}

_updateThemeColor () {
// 子组件可以访问到父组件 context 里面的内容
const { store } = this.context
const state = store.getState()
this.setState({ themeColor: state.themeColor })
}

render () {
return (
<h1 style={{ color: this.state.themeColor }}>React.js 小书</h1>
)
}
}

二、react-redux 的诞生

Provider

connect

export class Provider extends Component {
static propTypes = {
store: PropTypes.object,
children: PropTypes.any
}

static childContextTypes = {
store: PropTypes.object
}

getChildContext () {
return {
store: this.props.store
}
}

render () {
return (
<div>{this.props.children}</div>
)
}
}

const mapStateToProps = (state) => { themeColor: state.themeColor }
const mapDispatchToProps = (dispatch) => ({
onSwitchColor(color) => {
dispatch({ type: 'CHANGE_COLOR', themeColor: color })
}
});

// connect 实现
// connect 接受 mapStateToProps 和 mapDispatchProps 参数后，返回的函数是高阶组件，该高阶组件接受一个组件作为参数，然后用 Connect 包装之后返回
export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
class Connect extends Component {
static contextTypes = {
store: PropTypes.object
}

constructor () {
super()
this.state = {
allProps: {}
}
}

componentWillMount () {
const { store } = this.context
this._updateProps()
store.subscribe(() => this._updateProps())
}

_updateProps () {
const { store } = this.context
let stateProps = mapStateToProps
? mapStateToProps(store.getState(), this.props)
: {} // 防止 mapStateToProps 没有传入
let dispatchProps = mapDispatchToProps
? mapDispatchToProps(store.dispatch, this.props)
: {} // 防止 mapDispatchToProps 没有传入
this.setState({
allProps: {
...stateProps,
...dispatchProps,
...this.props
}
})
}

render () {
return <WrappedComponent {...this.state.allProps} />
}
}
return Connect
}

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)

三、react-redux 的性能优化

三、文章参考