redux入门到深度理解

次文章是我对redux理解,有错误地方或者不合理的地方欢迎小伙伴轻拍!!

redux 的两个核心概念

  1. 一个应用所有的状态,保存在一个对象里面。
  2. redux是一种订阅模式,有可订阅对象,订阅者,和消息发布

我开始看redux文档时,文档中着重描述的是状态管理,(一个应用的状态是由一个对象来控制的),对订阅模式提的很少,当了解的差不多的时候才发现当把redux当作订阅模式来理解
就好理解多了,redux是通过订阅模式来管理状态的。store是个可观察对象,存储了所有订阅者、state和reducer,dispatch(ation)发布消息,action是怎么来触发相应的reducer来修改state,这充分利用函数的副作用。

redux store的组成部分,和dispatch流程

redux入门到深度理解

createStore(reducers,defaultState,MiddleWave)返回的store对象主要包含reducer、state和subscriber(listener)。我把store的dispatch(action)拆分成三步,方便小伙伴了解怎么完成修改state和触发订阅者注册的函数。

  1. dispatch(action)第一步就是拿着action和state调用你写好的reduce,返回新的state,像api里面说的一样,这儿没有任何魔法,源码也显着并不高明。如果是combineReducers({...reducers}),reducer的函数名子就是state的一个属性名字,代码会逐个执行reducer,返回改变或者没有改变的state,
  2. 把返回的state赋值给就旧的state;combineReducers()多个reducer的话只会赋值给state[reducer.name]这个对象
  3. 通知订阅者,其实就是逐个运行保存到listeners里面的函数

如第一章说的两个核心-状态管理-订阅者模式,如果小伙伴能理解这两个核心,对redux api的理解就容易很多。api就不一一介绍了,如有疑问欢迎小伙伴留言!!

redux使用技巧

下面是我个人实用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"));
...

我的疑问

欢迎小伙伴解答
  1. 一个应用只能有一个store这个原则好吗?所有的订阅者都订阅这一个store,执行dispatch()的时候所有的订阅者都要被执行,这样合理吗?

相关推荐