是什么
Redux是一个状态管理库。
为什么要用
随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态)。管理不断变化的 state 非常困难。
三大原则
- 整个应用的 state被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个store中。
- 唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
- 为了描述 action 如何改变 state tree ,你需要编写 reducer。
关于action
- Action 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。除了 type 字段外,action 对象的结构完全由你自己决定。
- 多数情况下,type 会被定义成字符串常量,放在一个单独的文件中。
- actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
- action 是把数据传入 store 的惟一途径。
关于reducer
- reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
- reducer 一定要保持纯净,只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
- 遇到未知的 action 时,一定要返回旧的 state。
关于store
- Redux 应用只有一个单一的 store。
- store API介绍
-
getState()
:获取应用state -
dispatch(action)
:触发action -
subscribe(listener)
:注册监听器,每当 dispatch action 的时候就会执行。如果需要解绑这个变化监听器,执行 subscribe 返回的函数即可。 -
replaceReducer(nextReducer)
:替换 store 当前用来计算 state 的 reducer。
-
顶级API介绍
-
createStore(reducer, [preloadedState], enhancer)
:创建一个 Redux store来以存放应用中所有的 state。
参数:第一个参数为reducer函数,第二个参数为初始状态,第三个参数为store 增强器(高阶函数)
返回值:一个保存了应用所有 state 的对象。 -
combineReducers(reducers)
:把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数。
参数: 一个对象,它的值(value)对应不同的 reducer 函数,这些 reducer 函数后面会被合并成一个。
返回值:一个根reduce函数。 -
applyMiddleware(...middlewares)
:
参数:各种中间件。每个 middleware 接受Store
的dispatch
和getState
函数作为命名参数,并返回一个函数。
返回值:一个应用了 middleware 后的 store enhancer(函数)。 -
compose(...functions)
:从右到左来组合多个函数。
参数:需要合成的多个函数,预计每个函数都接收一个参数,它的返回值将作为一个参数提供给它左边的函数。
返回值:从右到左把接收到的函数合成后的最终函数。
好处:让你在写深度嵌套的函数时,避免了代码的向右偏移。 -
bindActionCreators(actionCreators, dispatch)
:把一个 value 为不同 action creator 的对象,转成拥有同名 key 的对象。同时使用dispatch
对每个 action creator 进行包装,以便可以直接调用它们。
参数:第一个参数为一个 action creator,或者一个 value 是 action creator 的对象。第二个参数为一个由Store
实例提供的dispatch
函数。
返回值:一个对象或函数,这个对象的 value 都是会直接 dispatch 原 action creator 返回的结果的函数。
中间件
- 中间件就是一个函数,对store.dispatch方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能。
- 中间件写法
const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
store => next => action =>{} 实现了三层函数嵌套,最后返回 next ,给下一个中间件使用。
store其实就是middlewareAPI ,next就是store.dispatch
//store
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
demo展示
官方demo。
实战酷狗音乐
看完这些demo,你的redux就入门了。