redux 源码分析，实现一个迷你的redux
实现一个redux
先不考虑中间件，实现一个简洁的redux
实现createStore
createStore是redux最主要的一个API了，通过createStore可以创建一个store用来存放应用中所有的state，一个应用只能有一个store。
// 先创建一个mini-redux.js文件:
export function createStore(reducer) {
// 初始化store
let currentStore = {};
// 初始化事件列表
let currentListeners = [];
// 获取state
function getState() {
return currentStore;
}
// 订阅事件
function subscribe(listener) {
currentListeners.push(listener);
}
// 定义dispatch方法
function dispatch(action) {
currentStore = reducer(currentStore, action);
currentListeners.forEach(v => v());
// return dispatch;
}
// 默认执行reducer type类型不要命中reducer中自定义的case
dispatch({type: '@ZQT-REDUX'});
return {getState, subscribe, dispatch}
}上面创建了一个redux.js文件，并暴露了一个createStore方法，接受reducer作为参数
// 创建mini-react-redux.js
import React from 'react';
import PropTypes from 'prop-types';
export const connect = (mapStateToProps = state => state, mapDispatchToProps = {}) => (WrapComponent) => {
return class connentComponent extends React.Component{
static contextTypes = {
store: PropTypes.object
}
constructor(props, context) {
super(props, context);
this.state = {
props: {}
}
}
componentDidMount() {
const {store} = this.context;
// 为什么非要订阅 因为没一个connect实际上就是一个订阅 每当dispatch执行的时候 就要重新执行以下update方法
store.subscribe(() => this.update());
this.update();
}
update = () => {
const {store} = this.context;
const stateProps = mapStateToProps(store.getState());
// 每一个action需要用dispatch包裹一下
const stateDispatch = bindActionCreators(mapDispatchToProps, store.dispatch);
this.setState({
props: {
...this.props,
...stateProps,
...stateDispatch
}
})
}
render() {
return <WrapComponent {...this.state.props}/>
}
}
}
export class Provider extends React.Component{
static childContextTypes = {
store: PropTypes.object
}
getChildContext() {
return {
store: this.store
}
}
constructor(props, context) {
super(props, context);
this.store = props.store;
}
render() {
return this.props.children
}
}
function bindActionCreators(creators, dispatch) {
const bound = {};
Object.keys(creators).forEach(v => {
bound[v] = bindActionCreator(creators[v], dispatch);
})
return bound;
}
function bindActionCreator(creator, dispatch) {
return (...args) => dispatch(creator(...args))
}上面创建了mini-react-redux.js文件，主要暴露了connect方法和Provider组件。
先看Provider组件。Provider利用的react的context属性，把store注入到Provider组件，并返回this.props.children(也就是Provider组件里面嵌入的组件，一般是页面的跟组件App组件)，这样所有的组件都可以共享store。
然后再看connect方法。connect方法是一个双重嵌套的方法(专业名词叫函数柯里化)里面的方法接受一个组件并且返回一个组件，正式高阶组件的用法，外面的函数接受mapStateToProps和mapDispatchToProps两个参数，mapStateToProps是用来把store里面的数据映射到组件的props属性中，mapDispatchToProps是把用户自己定义的action映射到组件的props属性中。
在componentDidMount方法里面执行了store.subscribe(() => this.update())这句代码，是因为每次使用dispatch触发一个action的时候都要执行一下update方法，即重新获取store数据并映射到组件中去，这样才能保证store数据发生变化，组件props能同时跟着变化。
bindActionCreators方法是用来把每一个action用dispatch方法包裹一下，因为action可能只是返回一个具有type属性的对象，只有用dispatch执行action才有意义。
到此为止，一个没有中间件的不支持异步dispatch的简洁版的redux已经实现了，创建一个demo，就可以看到效果了// 创建index.js 作为项目入口文件，大家可以自己添加action和reducer，就可以查看效果
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from './mini-redux';
import { counter } from './index.redux'
import { Provider } from './mini-react-redux';
import App from './App'
const store = createStore(counter);
ReactDOM.render(
(
<Provider store={store}>
<App />
</Provider>
),
document.getElementById('root'))支持中间件和异步action的redux实现
上面实现了简洁版的redux，再此基础上添加支持中间件的代码
// 修改mini-redux.js为
export function createStore(reducer, enhancer) {
if(enhancer) {
return enhancer(createStore)(reducer)
}
let currentStore = {};
let currentListeners = [];
function getState() {
return currentStore;
}
function subscribe(listener) {
currentListeners.push(listener);
}
function dispatch(action) {
currentStore = reducer(currentStore, action);
currentListeners.forEach(v => v());
// return dispatch;
}
dispatch({type: '@ZQT-REDUX'});
return {getState, subscribe, dispatch}
}
export function applyMiddleware(...middlewares) {
return createStore=>(...args)=> {
// 这里args 就是上面createStore 传过来的reducers
const store = createStore(...args)
let dispatch = store.dispatch
// 暴漏 getState 和 dispatch 给 第三方中间价使用
const midApi = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
// 创造第三方中间件使用 middlewareAPI 后返回的函数组成的数组
const middlewareChain = middlewares.map(middleware => middleware(midApi))
// 结合这一组函数 和 dispatch 组成的新的 dispatch，然后这个暴漏给用户使用，而原有的 store.dispatch 是不变的，但是不暴漏
dispatch = compose(...middlewareChain)(store.dispatch);
return{
...store,
dispatch
}
}
}
export function compose(...funcs) {
if(funcs.length === 0){
return arg => arg
}
if(funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((ret, item) => (...args) => item(ret(...args)));
}createStore方法修改了一下，多接受了一个enhancer方法，enhancer就是在index.js创建store的时候传过来的applyMiddleware方法。判断是否传了enhancer参数，如果有就return enhancer(createStore)(reducer)
applyMiddleware方法接受多个中间件作为参数，这个方法的最终目的就是创建一个新的dispatch属性，新的dispatch属性是经过中间件修饰过的，并且暴露这个新的dispatch属性，原来的dispatch属性不变。
compose方法是一个可以吧compose(fn1,fn2,fn3)(arg)转为fn3(fn2(fn1(arg)))的方法，也就是fn1的执行结果作为fn2的参数，fn2的执行结果作为fn1的参数，依次类推。正好可以利用reduce的特性实现这个效果。
const thunk = ({getState, dispatch}) => next => action => {
// 如果是函数 就执行action
if(typeof action === 'function') {
return action(dispatch, getState)
}
return next(action)
}
export default thunk异步action在定义的时候返回的就是一个接受一个dispatch的方法，所以如果action是一个函数，就吧dispatch和getState方法传给该action，并且执行该action。如果不是一个函数，就直接返回action。
到此为止一个支持中间件的redux就实现了，该demo只是为了学习redux的思想，不能作为真正的redux来使用，有很多类型检查代码都省略了从实现迷你版的redux可以体会到redux精巧的设计和函数式编程的魅力，有队函数式编程感兴趣的可以看一下这篇文章https://llh911001.gitbooks.io...
github源码地址：https://github.com/zhuqitao/z...