redux入门到深度理解

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

redux 的两个核心概念

1. 一个应用所有的状态，保存在一个对象里面。
2. 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和触发订阅者注册的函数。

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的一些心得，包括文件目录和代码组织

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()的时候所有的订阅者都要被执行，这样合理吗？

👍👍👍👍👍如果能帮助到小伙伴的话欢迎点个赞👍👍👍👍👍
👍👍👍👍👍如果能帮助到小伙伴的话欢迎点个赞👍👍👍👍👍