iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 19

【DAY 19】redux的那些兩三事

  • 分享至 

  • xImage
  •  

【前文】
  廢話不多說,直接進正文。
【正文】
  一般來說,以往用redux所做的action、reducer、store,在程式傳遞的時候都是同步執行的,也就是說一個口令一個動作,每次執行都是要先把上一個動作做完才能做下一個動作;但更常的時候,我們要的是非同步執行,在發API的同時dispatch、同時也可以在其他地方發dispatch。所以也可以做出非同步的redux application。
  此外,你也可以插入像是**redux-logger等middleware的套件,那什麼是middleware呢?middleware是一些你可以放到框架中接收請求和產生回應之間的程式碼**,你可以使用Redux middleware在action抵達reducer這段期間來console.log、回報當機、跟非同步API溝通、routing等等。
  比方說你可以安裝redux-logger這兩個套件。然後在你的index.js底下改成這樣:

  • index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import todoApp from './Redux/reducers';
import App from './Redux/components/presentional/App.js';
import logger from 'redux-logger'

// 在createStore第二個參數裡面放applyMiddleware
const store = createStore(
  todoApp,
  // applyMiddleware裡面可以方多個第三方middleWare套件
  // logger一定要放在最後面
  applyMiddleware(logger),
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

  這樣設定完成後,就會在每次dispatch action後,會先經過middleware,才進行到的reducer function哦!
圖片


上一篇
【DAY 18】更快的撰寫action跟reducer吧!redux-actions參上
下一篇
【DAY 20】redux你就到這裡吧,讓我們邁向下個階段
系列文
請你當我的好朋友吧!ReactJS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言