- 詳細內容
- 分類: Javascript
- 點擊數: 188
簡單來說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'));- 詳細內容
- 分類: Javascript
- 點擊數: 310
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);
} - 詳細內容
- 分類: Javascript
- 點擊數: 436
在這篇文章中，我們將揭開Redux 如何使用向後方法以及一個非常簡單的React + Redux示例的神秘面紗，我認為這將有助於您的理解。正如Redux發布的內容一樣，在解決術語之前，我將嘗試用簡單的術語解釋Redux。
如果你還不確定Redux的用途或者為什麼要使用它，請閱讀Redux的這個解釋然後再回到這裡。
第一：簡單的反應狀態
我們將從一個簡單的舊React狀態的例子開始，然後逐個添加Redux。
- 詳細內容
- 分類: Javascript
- 點擊數: 500
苦苦掙扎著繞過Redux？別擔心，你並不孤單。
我從許多人那裡聽說，Redux是編寫他們想要的React應用程序的最大障礙。
到本文結束時，您將了解Redux的用途，以及如何知道何時將其添加到您自己的應用程序中。
為什麼？
最好的問題是，我們為什麼要使用Redux？
答案並非“因為互聯網上的其他人都在使用它。”（我不懷疑這就是為什麼很多人都在使用它，但讓我們更深入。）
Redux有用的原因是它解決了一個問題。
不，它解決的問題不是“國家管理”。這是非常模糊的。哎呀，React已經做了國家管理。Redux確實幫助管理狀態，但這不是它解決的問題。
這是關於數據流
如果你使用React超過幾分鐘，你可能知道道具和單向數據流。數據傳遞下來通過道具組件樹。給定這樣的組件：
的count，存儲在App的狀態，將被傳遞下來的道具：
- 詳細內容
- 分類: 資訊筆記
- 點擊數: 545
使用您熟悉和喜愛的Mac創意工具，以及iPad的觸控體驗和Apple Pencil的精確度
創造力釋放出來
Astropad是能夠但透過觸控筆與iPad的結合，將其變身成為Mac電腦用的數位繪圖螢幕APP。首先條件是你需要在你的Mac安裝Mac版的Astropad，iPad上也裝上iPad版的Astropad，這樣就可透過Astropad，方便的使用 Wi-Fi 或 USB 連接Mac電腦，充分利用Mac和iPad，直接從iPad上直接繪製到Photoshop或任何其他應用程序。