1.为什么要使用redux？
随着互联网的高速发展，我们的应用变得越来越复杂，进行导致我们的组件之间的关系也变得日趋复杂，往往需要将状态父组件 -> 子组件 -> 子子组件 -> 又或者只是简单的 父组件与子组件之间的props传递也会导致我们的数据流变得难以维护，因为二次开发者不在熟悉项目的情况下无法第一时间确定数据来源是由谁发起的。使用redux之后，所有的状态都来自于store中的state，并且store通过react-redux中的Provider组件可以传递到Provider组件下的所有组件，也就是说store中的state对于Provider下的组件来说就是全局的。
2.redux的核心原理是什么?
1.将应用的状态统一放到state中，由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新
4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行
5.可以添加中间件对提交的dispatch进行重写
3.redux的api有哪些?
1.createStore 创建仓库，接受reducer作为参数
2.bindActionCreator 绑定store.dispatch和action 的关系
3.combineReducers 合并多个reducers
4.applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch
5.compose 整合多个中间件
接下来我们来依次实现createStore、bindActionCreator、combineReducers、
applyMiddleware、compose
createStore的实现
function createStore (reducer, enhancer) { if (enhancer) { enhancer(createStore)(reducer) } let currentState = {} //这就是前面提到的store管理的state let currentListener = [] //这是前面提到的为store添加监听函数 function subscribe (func) { currentListener.push(func) } function getState () { return JSON.parse(JSON.stringify(state)); } funtion dispatch (action) { currentState = reducer(currentState, action) currentListener.map(listen => listen()) //每当发生依次dispatch后都会遍历监听函数并执行 return action } return { subscribe, getState, dispatch } }
注意: createStore并没有直接返回store中存放的state，而是返回一个函数getState来获取state，当我们调用getState去获取state时，需要返回一个state的复制品，也就是需要返回一个深拷贝state之后对象，这样可以避免state值的非法篡改，因为如何直接返回state的话，只需通过state[key] = xxxx就能对state进行修改，违背了redux只能通过dispatch(action)去更新state
bindActionCreator的实现
function bindActionCreator (creators, dispatch) { let bound = {} Object.keys(creators).map(key =>{ const creator = creators[key] bound[key] = (..args) => dispach(creator(...args)) }) return bound }
bindActionCreator是为action函数外面包一层dispatch，这样在进行action发起时无需再手动dispatch了
combineReducers的实现
function combineReducers (reducers) { const reducersKeys = Object.keys(reducers), finalReducers = {} for (let i = 0; i < reducerKeys.length; i++) { if (typeof reducers[i] === 'function') { finalReducers[i] = reducers[i] } } const finalReducersKeys = Object.keys(finalReducers) return function combination (state={}, action) { let hasChanged = false, nextState = {} for (let i = 0; i < finalReducersKeys.length; i++) { const key = finalReducersKeys[i], reducer = finalReducers[key], preStateKeys = state[key], nextStateKeys = reducer(preState, action), nextState[key] = nextStateKeys hasChanged = hasChanged || preStateKeys !== nextStateKeys } return hasChanged ? nextState : state } }
applyMiddleware的实现
function applyMiddleware (...middlewares) { return createStore => (...args) => { const store = createStore(...args) let { getState, dispatch } = store const middlewateApi = { getState, dispatch: (...args) => dispatch(...args) } const middlewareChain = middlewares.map(middleware => middlware(middlewareApi)) dispatch = compose(...middlewareChanin)(dispatch) return { store, dispatch } } }
compose的实现
function compose (...funcs) { if(funcs.length === 0) { return args => args } if (funcs.length === 1) { return funcs[0] } return funcs.reduce( (ret, item) => (...args) => ret(item(...args)) ) }
compose是整合多个中间件的情况，这里使用reduce对用传入的中间件进行累加执行
