React學習筆記 動態注入reducer

2021-08-11 15:06:23 字數 2877 閱讀 7240

分布式實戰(乾貨)

spring cloud 實戰(乾貨)

mybatis 實戰(乾貨)

spring boot 實戰(乾貨)

構建中小型網際網路企業架構(乾貨)

因此如何做到像 router 一樣地在需要某一塊業務元件的時候再去新增這部分的 redux 相關的資料呢?

因此,在初始化 store 的時候,我們可以只定義一些預設公用 reducer(登入狀態、全域性資訊等等),也就是在 createstore 函式中只傳入這部分相關的 reducer ,這時候其狀態的資料結構如下:

當我們載入到某乙個業務邏輯對應的頁面時,比如 /home,這部分的業務**經過 router 中的處理是按需載入的,在其初始化該部分的元件之前,我們可以在 store 中注入該模組對應的 reducer ,這時候其整體狀態的資料結構應該如下:

在這裡需要做的就是將新增的 reducer 與原有的 reducer 組合,然後通過 store.replacereducer 函式更新其 reducer 來做到在 store 中的動態注入。

export

const

makeallreducer

= (asyncreducers) =>

combinereducers();

export

const

injectreducer

= (store, ) =>

export

const

createreducer

= (initialstate, action_handles) => (

(state

=initialstate, action) =>

);

reactdom.render(

>, document.getelementbyid('root'

));

import

createstore

from

'../store/createstore'

;import

reducer, from

'./rootreducer'

;export

const

store

=createstore({} , );

const

lazyloader

= (importcomponent) => (

class

asynccomponent

extends

component

async

componentdidmount () =

await

importcomponent();

this.setstate();

}render () =

this.state;

returnc?

<

c /

>

:null;

}});

export

default

class

root

extends

component >

'root__content'

>

'/'>home<

/link>

>

'/list'

>list<

/link>

>

'/detail'

>detail<

/link>

'/' component=

/>

'/list'

component=

/>

'/detail'

component=

/>

<

/switch>

<

/div>

<

/router>

<

/provider>

<

/div>

);}}

export

default (initialstate

= {}, initialreducer

= {}) =>

} const

store

=createstore(

makeallreducer(initialreducer),

initialstate,

compose(

...enhancers));

store.asyncreducers

= ; return store;

}

import  from

'../../store/reducerutils'

;import from

'../root'

;import

detail

from

'./index.jsx'

;import

reducer, from

'./reducer'

;injectreducer(store, );

export

default

detail;

React學習筆記

專案需要使用react進行開發,故從vue與react的異同切入學習,記錄一下學習筆記 react整體的思路就是函式式,所以推崇純元件,資料不可變,單向資料流 單向繫結 當然需要雙向的地方也可以做到,比如結合redux form vue是響應式的思想,認為資料可變,通過watcher監聽每乙個屬性,...

學習react筆記

node中匯入模組 var 名稱 require 模組識別符號 node中向外暴露成員的形式 module.exports 在es6中,也通過規範的形式,規定了es6中如何匯入和匯出模組 es6中匯入模組,使用 import 模組名稱 from 模組識別符號 import 表示路徑 import f...

React學習筆記之四 動態引數繫結

4.動態引數的設定 具體 可以參考我的github中的first react 1.state進行查詢 class content extends component render div note 這裡通過 來表明模板插入變數 vue中是 注意即可,然後通過讀取this.state.content來...