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()的時候全部的訂閱者都要被執行，這樣合理嗎？

👍👍👍👍👍若是能幫助到小夥伴的話歡迎點個贊👍👍👍👍👍
👍👍👍👍👍若是能幫助到小夥伴的話歡迎點個贊👍👍👍👍👍