星期一, 3月 26, 2018

[react.js] react-redux 使用流程

實作大多採用react-redux來整合原本的redux,
對於第一次入手的人感覺就是要懂一堆第三方套件後才能好好寫。
自已久久寫一下也會忘記大部份的邏輯,所以記錄一下。


目錄結構

actions =>放觸發的action定義
   -index.js =>負責匯出各redux的動作

constants => app state,
  -models 把各別的state 分類
      -index.js 匯出每個個別的app state
  -ActionTypes.js 匯出action要用的變數

reducers =>定義所有reducers
  -ui
    -UIReducer.js => Layout的reducer
  -index.js =>匯出所有reducers並combine所有reducer

store
  - index.js => 匯入所有app reducers與產生一個app store

產生一個新的redux動作


  1. 到constants/models定義新的redux state
  2. 到constants/index.js 匯出剛剛定義的 reduxstate
  3. 到ActionType.js加新的redux事件
  4. 到actions新增一個對應的 <你的新redux命名>Actions.js 檔案
  5. 到reducers新增一個對應的reducer,<你的新redux命名>Reducer.js 檔案
  6. 到reducers/index.js 匯入剛剛新加的reducer
  7. 到containers下找對應的container元件呼叫要使用的actions並匯入

    1. 登入元件範例    







其他你感興趣的文章

Related Posts with Thumbnails