初学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') )

---

待更新！！