發表文章

目前顯示的是有「Redux」標籤的文章

react-redux 從 store 刪除指定id物件

action 定義 export function removeCartItem(id){ return{ type:REMOVE_CART_ITEM, id:id }; } reducer 寫法 export default (state = initstate(), action) => { console.log('userReducer was called with state', state, 'and action', action); switch (action.type) { case GET_CART_ITEMS: return assign({}, state, { cartItems: action.items }); case REMOVE_CART_ITEM: return assign({},{ cartItems:state.cartItems.filter( //return value without target id (item) => { console.log('act:'+action.id); console.log('item:'+item.id); return item.id !== action.id; } ) }); default: return state; } }; 說明 聚焦在 case REMOVE_CART_ITEM: 這邊 1. assign()這個函式會在第一個參數new...

React搭配Redux 簡單範例教學與講解

前言         剛把react-redux看完順便整理寫了一些內容,唯一的感想大概就是痛吧...之前沒怎麼碰過JavaScript,一上來練習就是React全套,什麼Npm、ES6、webpack、NodeJS、CommonJS、React、JSX、Babel、Redux叭拉趴拉,對於一個完全新手真的是非常高的一個門檻、自己也是斷斷續續看了2個多月才終於走到最後把React結合Redux使用。         相對於前面的套件管理Npm或是打包工具webpack,雖然無形中增加許多門檻,但是真正學會如何使用後對於開發上有著莫大的效益,Redux我就不覺得是這麼一回事了,雖然它幫助我們達到元件中的互相傳遞,但是使用上非常不直覺,光是傳遞一個簡單動作就要建立2~3個js檔,雖然都是架構檔案,但是對於第一次接觸還是非常霧傻傻阿...不得不吐槽一下那個官方文件,非常的不好懂         最後如果還不知道怎麼使用Redux非常建議去看 這篇文章 雖然是英文的,但是非常易懂且搭配實例 react-redux 簡單使用範例與講解 由於編排問題就直接放在github上面方便閱讀 文件(英) https://github.com/p208p2002/simple-react-redux/blob/master/README.md 程式碼 https://github.com/p208p2002/simple-react-redux 這邊補充connect的兩種用法 https://hackmd.io/s/r1omeG12Z