redux demo zhushi

Author: lewis617

redux-examples/counter/actions/counter.js

@@ -1,34 +1,38 @@
 export const INCREMENT_COUNTER = 'INCREMENT_COUNTER'
 export const DECREMENT_COUNTER = 'DECREMENT_COUNTER'
-
+//导出加一的方法
 export function increment() {
   return {
     type: INCREMENT_COUNTER
   }
 }
-
+//导出减一的方法
 export function decrement() {
   return {
     type: DECREMENT_COUNTER
   }
 }
-
+//导出奇数加一的方法，该方法返回一个方法，包含dispatch和getState两个参数，dispatch用于执行action的方法，getState返回state
 export function incrementIfOdd() {
   return (dispatch, getState) => {
+    //获取state对象中的counter属性值
     const { counter } = getState()
 
+    //偶数则返回
     if (counter % 2 === 0) {
       return
     }
-
+    //没有返回就执行加一
     dispatch(increment())
   }
 }
-
+//导出一个方法,包含一个默认参数delay,返回一个方法,一秒后加一
 export function incrementAsync(delay = 1000) {
   return dispatch => {
     setTimeout(() => {
       dispatch(increment())
     }, delay)
   }
 }
+
+//这些方法都导出,在其他文件导入时候,使用import * as actions 就可以生成一个actions对象包含所有的export

redux-examples/counter/components/Counter.js

@@ -2,7 +2,9 @@ import React, { Component, PropTypes } from 'react'
 
 class Counter extends Component {
   render() {
-    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props
+    //从组件的props属性中导入四个方法和一个变量
+    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
+    //渲染组件，包括一个数字，四个按钮
     return (
       <p>
         Clicked: {counter} times
@@ -18,13 +20,15 @@ class Counter extends Component {
     )
   }
 }
-
+//限制组件的props安全
 Counter.propTypes = {
+  //increment必须为fucntion,且必须存在
   increment: PropTypes.func.isRequired,
   incrementIfOdd: PropTypes.func.isRequired,
   incrementAsync: PropTypes.func.isRequired,
   decrement: PropTypes.func.isRequired,
+  //counter必须为数字，且必须存在
   counter: PropTypes.number.isRequired
-}
+};
 
 export default Counter

redux-examples/counter/containers/App.js

@@ -3,14 +3,16 @@ import { connect } from 'react-redux'
 import Counter from '../components/Counter'
 import * as CounterActions from '../actions/counter'
 
+//将state.counter绑定到props的counter
 function mapStateToProps(state) {
   return {
     counter: state.counter
   }
 }
-
+//将action的所有方法绑定到props上
 function mapDispatchToProps(dispatch) {
   return bindActionCreators(CounterActions, dispatch)
 }
 
+//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
 export default connect(mapStateToProps, mapDispatchToProps)(Counter)

redux-examples/counter/reducers/counter.js

@@ -1,5 +1,6 @@
 import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter'
 
+//reducer其实也是个方法而已,参数是state和action,返回值是新的state
 export default function counter(state = 0, action) {
   switch (action.type) {
     case INCREMENT_COUNTER:

redux-examples/counter/reducers/index.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux'
 import counter from './counter'
 
+//使用redux的combineReducers方法将所有reducer打包起来
 const rootReducer = combineReducers({
   counter
 })

redux-examples/counter/store/configureStore.js

@@ -2,13 +2,16 @@ import { createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
 import reducer from '../reducers'
 
+//applyMiddleware来自redux可以包装 store 的 dispatch
+//thunk作用是使被 dispatch 的 function 会接收 dispatch 作为参数，并且可以异步调用它
 const createStoreWithMiddleware = applyMiddleware(
   thunk
 )(createStore)
 
 export default function configureStore(initialState) {
   const store = createStoreWithMiddleware(reducer, initialState)
 
+  //热替换选项
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers
     module.hot.accept('../reducers', () => {