初學redux筆記，及一個最簡單的redux實例

categories:

• 筆記

tags:

• react
• redux

• 前端框架

把初學redux的一些筆記寫了下來

分享一個入學redux很合適的demo，

用redux實現計數器

這是從阮一峯老師github上面找到，redux最簡單的例子，我加了點點註釋
demo在線預覽
源碼地址

js部分主要代碼以下：
```

/* ----定義reducer：用switch來匹配發出的操做信息並改變state，以下面的INCREMENT----*/
   function counter(state, action) {
     if (typeof state === 'undefined') {
       return 0
     }
     switch (action.type) {
       case 'INCREMENT':
         return state + 1
       case 'DECREMENT':
         return state - 1
       default:
         return state
     }
   }
   /*-----store: 存儲state數據，能夠用getState方法來獲取當前state
  用createStore方法，傳入reducer來獲得store，一個應用對應一個store----*/
   var store = Redux.createStore(counter)

   var valueEl = document.getElementById('value')

   function render() {
     valueEl.innerHTML = store.getState().toString()
   }

   render()
   /*----store的subscribe方法監聽state變化，一旦變化就執行render函數----*/    
   store.subscribe(render)


   /*----store的dispatch定義一個操做信息，reducer會將這個信息匹配具體對state的操做*/
   document.getElementById('increment')
     .addEventListener('click', function () {
       store.dispatch({ type: 'INCREMENT' })
     })

   document.getElementById('decrement')
     .addEventListener('click', function () {
       store.dispatch({ type: 'DECREMENT' })
     }) ```

具體思路以下：

瞭解這些就能完成一個最簡單的redux實例了

---

其餘須要瞭解的方法：

• applyMiddlewares():傳入中間件，並將其依次執行
• connect: 鏈接容器組件和UI組件

const VisibleTodoList = connect(  
       mapStateToProps,  //創建一個從外部state到UI組件props的映射
       mapDispatchToProps  //定義UI組件的參數到dispatch方法的映射
)(TodoList)  
//TodoList是 UI 組件，VisibleTodoList就是由 React-Redux 經過connect方法自動生成的容器組件

• < provider/>組件：包裹在根組件外，使得全部子組件都能拿到state
  render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )

---

待更新！！