redux.md

Redux

• Redux
  • 檔案架構
  • 使用方式
    • action
    • Component

檔案架構

moedules 底下每個 moedule 都各自有 css、action、route、reducer。

    │
    ├─src
    │  ├─modules
!   │  │  └─ExampleModule
!   │  │      ├─css
!   │  │      │  └─index.css
!   │  │      ├─action.js
!   │  │      ├─index.js
!   │  │      ├─route.js
!   │  │      └─reducer.js
    │  .....
    │  └─components
    ├─app.js
    ├─reducers.js
    └─routes.js

使用方式

action

1. action 存放共用的 function，有要使用API的都方在此檔案。
2. 如無共用的 function 可直接寫在頁面上。

• 在頁面上使用

// import function
import { yourFunction } from './action';

// 使用 Function
dispatch(yourFunction());

• 在 action 中的Ａ function 裡使用 Ｂ function

// 使用 Function
yourFunction()(dispatch);
// 如有帶store 也要附加上去
yourFunction()(dispatch, getStore);

Component

// 有使用到共用的 function 或 state 要使用下面方式
<Component {...props}>