Redux


Posted by chihyu on 2021-01-25

Flux

是一個架構,很複雜,適合處理規模較大的東西 (ex. facebook)
要解決的問題:
傳統 MVC,多個 Model 可能會跟多個 View 連結在一起,當資料被改變時,會不知道是誰改變的,所以需要發一個 action 再由 dispatcher 去改變資料,這樣比較可以追蹤資料是由誰改變的

Redux

Redux 要解決的問題:狀態管理(資料、UI 的對應)

用 React 的時候,我們只需要專注於資料,畫面的部分 React 會處理

原理跟 Flux 類似
View -> 觸發 event handler -> dispatch 發了一個 Action -> 到 store 更新狀態 -> 變更 View

這跟 React 的 useReduce 也有點像

React 跟 Redux 是可以分開操作的

Reducer

newState = reducer(currentState, action)

dispatch action -> 傳進去 reducer -> 結合現在的 state -> 合成新的 state

React、Redux 結合

  • 安裝 redux
  • 安裝 react-redux(新版推薦 Redux Toolkit)
    npm install react-redux
    

資料夾結構

src/index.js(用來 render app)

  • 引入 Provider:讓 Redux store 在 react 可以用
    import { Provider } from 'react-redux';
    import store from './redux/store';
    // 把 store 傳進去,底下就拿得到 store
    ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById("root")
    );
    

redux/store.js

  • 引入 createStore()

redux/actionTypes.js

  • 輸出各個 actionTypes
    redux/actions.js(action creator)
  • 引入 actionTypes,設定 actionTypes 的 function

redux/reducers(裡面放各個 reducer 的檔案)

  • index.js:引入 combineReducers()、集合各個 reducer 再一起輸出
  • todos.js:todos reducer
  • users.js:users reducet

App/App.js(輸出 App)

  • 引入 useSelector(hooks),選到想要的東西,對 store 的資料做轉換
  • 引入 useDispatch(hooks),拿到 dispatch

Redux DevTool

  1. chrome 擴充
  2. 打開 devTool,選擇 redux
  3. store not found -> 點選連結 -> With Redux -> Basic Store
  4. 在 store 檔案裡多加上 window 那一段:
    const store = createStore(
    reducer, /* preloadedState, */
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
    

Connect

  • 讓 React、redux 結合再一起的一種方法,比起 hooks 版本(useSelector、useDispatch),在專案中比較常用 connect 的版本
  • 可以讓 react component 跟 redux 的東西結合在一起
  • 是一個 function,用來讀取 Redux store 的 values(如果store 更新,就會重新讀取),傳進兩個參數 mapStateToProps、mapDispatchToProps,可以用來指定你想要拿到的資料
    • mapStateToProps:是一個 function, 給你 redux 的 store,會 return 你想要的東西,就會變成 component 的 props(類似 useSelector 的概念)
    • mapDispatchToProps:可以是一個 function 或一個 object,function: 在 component 被建立時會呼叫一次,dispatch 為參數,會回傳 object,object 裡面是使用 dispatch 來發送 action 的 function;object:裡面是 action creator,每個 action creator 會變成 prop function,並會在呼叫時自動 dispatch action
  • 會回傳一個 function
  • 資料結構
    src/container/AddTodo:跟 redux 關聯的部分
    src/component/AddTodo:只負責 UI,不知道 redux 的存在
    • 好處:好測試,component 的測試歸 component、redux 的測試歸 redux 的
  • 不建議 hook 的方法跟 connect 混在一起寫

其他補充

<Fragment></Fragment>:空的 component,可以簡寫成<></>

  1. 為什麼我們需要 Redux?
  2. Redux 是什麼?可以簡介一下 Redux 的各個元件跟資料流嗎?
  3. 該怎麼把 React 跟 Redux 串起來?

#Web #Redux







Related Posts

HTML 基礎

HTML 基礎

[Leetcode in Java] 102. Binary Tree Level Order Traversal

[Leetcode in Java] 102. Binary Tree Level Order Traversal

PHP & MySQL

PHP & MySQL


Comments