初學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' })
        }) ```

具體思路如下：

![image](http://ww3.sinaimg.cn/large/96ea1c33gw1fbkj72bjm6j20gr085gmt.jpg)
##### 了解這些就能完成一個最簡單的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')
)```
    

---
 待更新！！