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 + 1case 'DECREMENT':return state - 1default: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') )

---

待更新！！

轉載于:https://www.cnblogs.com/gaoxianlyx/p/6266175.html

總結

以上是生活随笔為你收集整理的初学redux笔记，及一个最简单的redux实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。