react+redux教程（一）

jopen 9年前發布 | 50K 次閱讀 Redux JavaScript開發

今天，我們通過解讀官方示例代碼（counter）的方式來學習react+redux。

例子

這個例子是官方的例子，計數器程序。前兩個按鈕是加減，第三個是如果當前數字是奇數則加一，第四個按鈕是異步加一（延遲一秒）。

源代碼： https://github.com/lewis617/myReact/tree/master/redux-examples/counter

組件

components/Counter.js

import React, { Component, PropTypes } from 'react'

class Counter extends Component {
  render() {
    //從組件的props屬性中導入四個方法和一個變量
    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
    //渲染組件，包括一個數字，四個按鈕
    return (
      <p>
        Clicked: {counter} times
        {' '}
        <button onClick={increment}>+</button>
        {' '}
        <button onClick={decrement}>-</button>
        {' '}
        <button onClick={incrementIfOdd}>Increment if odd</button>
        {' '}
        <button onClick={() => incrementAsync()}>Increment async</button>
      </p>
    )
  }
}
//限制組件的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

上述代碼，我們干了幾件事：

從props中導入變量和方法
渲染組件

有的同學可能會急于想知道props的方法和變量是怎么來，下面我們繼續解讀。

容器

containers/App.js

import { bindActionCreators } from 'redux'
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同學可能已經暈了，我來圖解下redux的流程。

state就是數據，組件就是數據的呈現形式，action是動作，action是通過reducer來更新state的。

上述代碼，我們干了幾件事：

把state的counter值綁定到props上
把action的四個方法綁定到props上

那么為什么就綁定上去了呢？因為有connect這個方法。這個方法是如何實現的，或者我們該怎么用這個方法呢？connect這個方法的用法，可以直接看 api文檔。我也可以簡單描述一下：

第一個參數，必須是function，作用是綁定state的指定值到props上面。這里綁定的是counter
第二個參數，可以是function，也可以是對象，作用是綁定action的方法到props上。
返回值，是綁定后的組件

這里還有很多種其他寫法，我喜歡在第二個參數綁定一個對象，即

import { bindActionCreators } from 'redux'
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
  }
}

//通過react-redux提供的connect方法將我們需要的state中的數據和actions中的方法綁定到props上
export default connect(mapStateToProps, CounterActions)(Counter)

還可以不寫第二個參數，后面用dispatch來觸發action的方法，即

import { bindActionCreators } from 'redux'
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
  }
}

//通過react-redux提供的connect方法將我們需要的state中的數據綁定到props上
export default connect(mapStateToProps)(Counter)

后面在組件中直接使用dispatch()來觸發action。

action和reducer兩個好基友負責更新state

actions/counter.js

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

reducers/counter.js

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:
      return state + 1
    case DECREMENT_COUNTER:
      return state - 1
    default:
      return state
  }
}

reducers/index.js

import { combineReducers } from 'redux'
import counter from './counter'

//使用redux的combineReducers方法將所有reducer打包起來
const rootReducer = combineReducers({
  counter
})

export default rootReducer

上述代碼我們干了幾件事:

寫了四個action方法
寫了reducer用于更新state
將所有reducer(這里只有一個)打包成一個reducer

看到這里，有很多初次接觸redux的同學可能已經暈了，怎么那么多概念？為了形象直觀，我們在開發工具（react dev tools）上看看這些state，props什么的：

action的方法和state的變量是不是都綁定上去了啊。state怎么看呢？這個需要借助redux的開發工具，我不想破壞示例代碼的結構所以，就不展示state了，不過state是我們自己定義的，我們知道state就只有個數字而已。

注冊store

store/configureStore.js

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', () => {
      const nextReducer = require('../reducers')
      store.replaceReducer(nextReducer)
    })
  }

  return store
}

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import App from './containers/App'
import configureStore from './store/configureStore'

const store = configureStore()

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

上述代碼，我們干了幾件事：

用中間件將dispatch觸發的方法中加入dispatch參數（action里面有，可以去看看）
如果在熱替換狀態（ Webpack hot module replacement ）下，允許替換reducer
導出store
將store放進provider
將provider放在組件頂層，并渲染

服務

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 3000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> :earth_americas:  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
}

npm start 后執行node server ，觸發webpack。webpack插件功能如下：

OccurenceOrderPlugin的作用是維持構建編譯代碼
HotModuleReplacementPlugin是熱替換，熱替換和dev-server的hot有什么區別？不用刷新頁面，可用于生產環境
NoErrorsPlugin用于保證編譯后的代碼永遠是對的，因為不對的話會自動停掉。

server.js中的用法是參考官網的，沒有為什么，express中間件就是在請求后執行某些操作。

結語

好了，終于寫完第一篇了。react+redux是當前熱點，很高興可以分享我的經驗和習得。請繼續關注我的react+redux教程以及其他諸如angular方面的博客，謝謝！

來自： http://www.cnblogs.com/lewis617/p/5145073.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1453288441026.html

Redux JavaScript開發

react+redux教程（一）

例子

組件

容器

action和reducer兩個好基友負責更新state

注冊store

服務

結語

相關經驗

相關資訊

相關文檔

目錄