簡單來說applyMiddleware是使action中能做更多的事情,如同去賦予執行action有能力在中間去多執行function,不同只是傳遞資料參數,thunk則在中間扮演著處理非同步問題。

Thunk應用增加延遲2秒

const { createStore, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux
const thunk = ReduxThunk.default
const Increment = () =>{
  return function (dispatch){
    setTimeout(()=>{
      dispatch({type: 'INCREMENT'})
    },2000)
  }
  // return {
  //     type: 'INCREMENT'
  // }
}
class Counter extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.props.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.props.increment}>+</button>
        </div>
      </div>
    )
  }
}
const actionsCreators = (dispatch)=> {
  return{
    increment: () => {
      //store.dispatch({ type: 'INCREMENT' });
      dispatch(Increment())
    },
    decrement : () => {
      dispatch({ type: 'DECREMENT' });
    }
  }
}
function mapStateToProps(state) {
  console.log(state);

  return {
    count: state.count
  };
}

const Concounter = connect(mapStateToProps,actionsCreators)(Counter);

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

const store = createStore(reducer,window.devToolsExtension ? window.devToolsExtension() : undefined ,applyMiddleware(thunk));

const App = () => (
  <Provider store={store}>
    <Concounter/>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Comment

Javascript table 轉 Excel檔案

讀取HTML table 將document.write寫入檔案

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

    return (sa);
} 

Comment

在這篇文章中,我們將揭開Redux 如何使用向後方法以及一個非常簡單的React + Redux示例的神秘面紗,我認為這將有助於您的理解。正如Redux發布的內容一樣,在解決術語之前,我將嘗試用簡單的術語解釋Redux。

如果你還不確定Redux的用途或者為什麼要使用它,請閱讀Redux的這個解釋然後再回到這裡。

第一:簡單的反應狀態

我們將從一個簡單的舊React狀態的例子開始,然後逐個添加Redux。

Comment

苦苦掙扎著繞過Redux?別擔心,你並不孤單。

我從許多人那裡聽說,Redux是編寫他們想要的React應用程序的最大障礙。

到本文結束時,您將了解Redux的用途,以及如何知道何時將其添加到您自己的應用程序中。

為什麼?

最好的問題是,我們為什麼要使用Redux?

答案並非“因為互聯網上的其他人都在使用它。”(我不懷疑這就是為什麼很多人都在使用它,但讓我們更深入。)

Redux有用的原因是它解決了一個問題。

不,它解決的問題不是“國家管理”。這是非常模糊的。哎呀,React已經做了國家管理。Redux確實幫助管理狀態,但這不是它解決的問題。

這是關於數據流

如果你使用React超過幾分鐘,你可能知道道具和單向數據流。數據傳遞下來通過道具組件樹。給定這樣的組件:

的count,存儲在App的狀態,將被傳遞下來的道具:

Comment

使用您熟悉和喜愛的Mac創意工具,以及iPad的觸控體驗和Apple Pencil的精確度

創造力釋放出來

Astropad是能夠但透過觸控筆與iPad的結合,將其變身成為Mac電腦用的數位繪圖螢幕APP。首先條件是你需要在你的Mac安裝Mac版的Astropad,iPad上也裝上iPad版的Astropad,這樣就可透過Astropad,方便的使用 Wi-Fi 或 USB 連接Mac電腦,充分利用Mac和iPad,直接從iPad上直接繪製到Photoshop或任何其他應用程序

Comment

Copyright © 2018 ucamc