redux

文章目录

1. Redux
2. react-redux
3. 中间件
   1. redux-promise

Redux

由于 SPA 应用随着开发层级越来越多，管理不断变化的 state 非常困难，即使是同级组件，也需要经过很多层才能通信。Redux 是在这种情况下出现的，实现原理是 发布订阅模式。它其实并不依赖于 react，但一般与 react 一起使用，内部使用闭包保存 state，向外暴露 getStore、dispatch、reducer 等方法

react-redux

由于每个组件想要使用 redux，必须引入 store，设置 dispatch，通过 subscribe 在 componentDidMount 时订阅，在 componentWillUnmount 时取消订阅，极其繁琐，即使 redux 里有 bindActionCreators 来解决每次都要写 store.dispatch 的问题，也是效果甚微。因此出现了 react-redux 这个库，它是一个高阶组件，通过 connect 方法把 store 和组件映射起来，通过 Provider 注入到组件的 props，就可以省去上面的步骤，直接使用 props 使用 store 的 state、action 了。

中间件

redux-promise

由于 redux 本来不处理 Promise，所以通过中间件来完成。

等待 payload 为 Promise 的 action 或本身为 Promise 的 action 动作结束之后，才更新派发动作。

function promiseDispatch(action) {
    if (action.then && typeof action.then === 'function') {
        // 直接 dispatch res 即可，因为本来 action 是个 Promise
        action.then(dispatch).catch(dispatch)
    } else if (action.payload && typeof action.payload.then === 'function') {
        // 仅把 payload 修改，因为本来 action.payload 是个 Promise，保持结构一样
        action.payload
            .then(res => dispatch({ ...action, payload: result}))
        	.catch(err => {
	            dispatch({ ...action, payload: err, error: true})
            	return Promise.reject(err)
        })
    }
}
// 注意，如果返回的 Promise 有 .then 属性，表示返回等 .then 执行完了的 Promise，它仍然返回一个 Promise