redux入门到深度理解
次文章是我对redux理解,有错误地方或者不合理的地方欢迎小伙伴轻拍!!
redux 的两个核心概念
- 一个应用所有的状态,保存在一个对象里面。
- redux是一种订阅模式,有可订阅对象,订阅者,和消息发布
我开始看redux文档时,文档中着重描述的是状态管理,(一个应用的状态是由一个对象来控制的),对订阅模式提的很少,当了解的差不多的时候才发现当把redux当作订阅模式来理解
就好理解多了,redux是通过订阅模式来管理状态的。store是个可观察对象,存储了所有订阅者、state和reducer,dispatch(ation)
发布消息,action是怎么来触发相应的reducer来修改state,这充分利用函数的副作用。
redux store的组成部分,和dispatch流程
createStore(reducers,defaultState,MiddleWave)
返回的store对象主要包含reducer、state和subscriber(listener)。我把store的dispatch(action)拆分成三步,方便小伙伴了解怎么完成修改state和触发订阅者注册的函数。
dispatch(action)
第一步就是拿着action和state调用你写好的reduce,返回新的state,像api里面说的一样,这儿没有任何魔法,源码也显着并不高明。如果是combineReducers({...reducers})
,reducer的函数名子就是state的一个属性名字,代码会逐个执行reducer,返回改变或者没有改变的state,- 把返回的state赋值给就旧的state;
combineReducers()
多个reducer的话只会赋值给state[reducer.name]
这个对象 - 通知订阅者,其实就是逐个运行保存到listeners里面的函数
如第一章说的两个核心-状态管理-订阅者模式,如果小伙伴能理解这两个核心,对redux api的理解就容易很多。api就不一一介绍了,如有疑问欢迎小伙伴留言!!
redux使用技巧
下面是我个人实用redux的一些心得,包括文件目录和代码组织
action.js
放置生产action的函数 ,方便dispatch()使用
import {NAV_TO} from "./actionTypes" export function actionNavTo(path) { return {type: NAV_TO, path: path} } ...
actionTypes.js
统一方式action.type的文件
export const NAV_TO = "NAV_TO"; ...
reducer.js
统一放reducer的地方
import {combineReducers } from 'redux' import {NAV_TO} from "./actionTypes" function navTo(state = "/", action) { switch (action.type) { case 'NAV_TO': return action.path; default: return state } } ... export default combineReducers({navTo,...})
store.js
构建stote.js
import {createStore } from 'redux' import combineReducers from "./reducer" let store = createStore(combineReducers); export default store;
store dispatch触发
import store from "../../redux/store"; import {actionNavTo} from "../../redux/action"; ... store.dispatch(actionNavTo("/login")); ...
我的疑问
欢迎小伙伴解答
- 一个应用只能有一个store这个原则好吗?所有的订阅者都订阅这一个store,执行dispatch()的时候所有的订阅者都要被执行,这样合理吗?