摘要：提供，監(jiān)控的觸發(fā)以及的變化。在動(dòng)態(tài)內(nèi)容的最外層應(yīng)該使用進(jìn)行包裹，接收作為參數(shù)，注意是一個(gè)函數(shù)并不是。將作為往子節(jié)點(diǎn)進(jìn)行傳遞，并實(shí)現(xiàn)的熱替換。只需要聲明初始狀態(tài)以及在接收到之后的改變規(guī)則就可以了。

@(blog)

  
本文的讀者為了解flux概念，熟悉react，了解es6語法的同學(xué)

redux 是最近很火的一個(gè) flux 框架，短短的一個(gè)月現(xiàn)在已經(jīng)有2900+的 star 了，watch之后每天收到幾百封 pr 的郵件，廢話就不多說了。
為什么要用 redux ，請看連接 The Evolution of Flux Frameworks。

主要特點(diǎn)

Everything (Stores, Action Creators, configuration) is hot reloadable. —— 配合起 hotloader 應(yīng)該特別爽，雖然現(xiàn)在用的是 browserify，好處感覺并不明顯。

store 中的數(shù)據(jù)不受限制，可以是 number object array 等等，廢話，因?yàn)樗?store 只是簡單的函數(shù)。

提供 devtools ，監(jiān)控 action 的觸發(fā)以及 state 的變化。

源碼清晰簡單，輕量級(jí)，根本不需要文檔，直接看源碼就行了....缺點(diǎn)就是如果看不懂源碼，光看文檔會(huì)覺得不夠清晰。

api 很精簡，不用記茫茫多的 api

every thing is simple function

connecter 與 provider 這兩個(gè)東西用起來總覺得很繁瑣，不那么優(yōu)雅。

下面通過寫的一個(gè)簡單counter的例子 介紹 redux 的核心方法以及一些需要注意的地方。

同步與異步兩種actionCreator

middleware的使用

dispatch actions

拿到并同步state

代碼放在https://github.com/yeatszhang/redux-tutorial， 需要安裝gulp

代碼是基于分支 v1.0.0-rc api略微有些區(qū)別，詳情見 Breaking API changes for 1.0。

actions creator 是用來生成 action 的函數(shù)，在默認(rèn)情況下可以接受返回object或者function 的函數(shù)，很多人學(xué)習(xí)flux的時(shí)候把a(bǔ)ction與actionCreator弄混淆....：

// 直接返回object
actionCreators.addTodo = function(text) {
  return {
    type: types.ADD_TODO,
    text
  };
}

// 返回函數(shù)
actionCreators.incrementAsync = function() {
  return (dispatch, getState) => {
    // actionCreator中可以通過getState獲得當(dāng)前的state
    console.log(getState());
    // 異步action
    setTimeout(() => {
      dispatch({
        type: INCREMENT_COUNTER2,
      });
    }, 1000);
  };
};

在沒有使用任何 middleware 的情況下，只有這有兩種 action 可以被 dispatch。

在動(dòng)態(tài)內(nèi)容的最外層應(yīng)該使用Provider進(jìn)行包裹，provider接收store作為參數(shù)，注意children是一個(gè)函數(shù)并不是reactElement。
provider將store作為context往子節(jié)點(diǎn)進(jìn)行傳遞，并實(shí)現(xiàn)store的熱替換。因此在provider內(nèi)的組件其實(shí)可以不通過connect來拿到dispatch以及state，而直接通過context拿到store對象，不過作者不推薦這么做。

import React from "react";
import { createStore, applyMiddleware, combineReducers } from "redux";
// redux midlleware repositories
import thunk from "redux-thunk";
// 將 redux 與 react 相關(guān)的部分，如 connector provider 多帶帶抽取出來
import { Provider } from "react-redux";
import reducers from "../reducers";
import CounterApp from "./CounterApp.js";
import logMiddleware from "../middleWares/logMiddleware.js";

const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(thunk, logMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer);
// 使用middleWare thunk， 如果沒有自定義中間層的需求可以直接寫
// const store = createStore(reducer);

class App extends React.Component {
  render() {
    return (
      
        {() => }
      
    );
  }
}

smart component擁有兩個(gè)特點(diǎn)：

自動(dòng)關(guān)聯(lián)store中的state并自動(dòng)re-render

可以通過dispatch來分發(fā)事件，從而觸發(fā)store的更新

剛接觸redux的同學(xué)肯定會(huì)覺得這個(gè)connect很難以理解。還是在代碼里面說把。。。

/**
 * Created by yichizhang on 15/7/26.
 */

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { Connector } from "react-redux";
import Counter from "../components/Counter";
import actionCreators1 from "../actionCreators/actionCreators1.js";
import actionCreators2 from "../actionCreators/actionCreators2.js";

// state 是各reducer中state的集合
function select(state) {
  // 從各reducer中挑選出component需要監(jiān)聽的state
  return {
    counter1: state.reducer1.counter,
    counter2: state.reducer2.counter,
  };
}

export default class CounterApp extends Component {
  // select函數(shù)的返回值會(huì)與dispatch組裝程一個(gè)object作為參數(shù)
  // 從這里看出connector就是幫忙拿到provider中store的dispatch方法以及挑選出需要使用的state
  renderChild({ counter1, counter2, dispatch}) {
    // 個(gè)人覺得這樣使用action十分不方便，尤其是當(dāng)組件只需要觸發(fā)actions不需要監(jiān)聽store的變化的時(shí)候。我會(huì)偷懶通過context去拿到dispatch~~
    const actions1 = bindActionCreators(actionCreators1, dispatch);
    const actions2 = bindActionCreators(actionCreators2, dispatch);
    const props = { ...actions1, ...actions2, counter1, counter2 };
    // 所有的action以及state都會(huì)以props的形式提供給Counter，然后在Counter里面就可以為所欲為了~
    return ;
  }

  render() {
    return (
      
        {this.renderChild}
      
    );
  }
}

redux認(rèn)為程序員不需要去寫store中的邏輯而只需要寫明對state的處理邏輯就好：

old  sate => action  => new state

這是一個(gè)完全同步的過程。reducer只需要聲明初始狀態(tài)以及state在接收到action之后的改變規(guī)則就可以了。

import React from "react/addons";
import {INCREMENT_COUNTER1, DECREMENT_COUNTER1} from "../constants/actionsTypes.js";
const update = React.addons.update;

// state可以是任何類型
const initialState = {
  counter: 0,
};

// reducer只是一個(gè)簡單的switch方法
export default function counter(state = initialState, action = null) {
  switch (action.type) {
    case INCREMENT_COUNTER1:
      // 需要注意的是connector當(dāng)select中的state發(fā)生變化時(shí)會(huì)做一個(gè)shallow equal的操作，
      // 所以如果需要操作引用值的時(shí)候一定不能直接賦值，需要使用addon中的update或者immutable.js，知道看到這兩個(gè)工具又不想繼續(xù)學(xué)了..其實(shí)很簡單
      // 這樣可以大大避免重復(fù)的render，從而提高性能
      return update(state, {
        counter: {
          $set: state.counter + 1,
        },
      });
    case DECREMENT_COUNTER1:
      return update(state, {
        counter: {
          $set: state.counter - 1,
        },
      });
    default:
      return state;
  }
}

感興趣的同學(xué)可以看看，一般來說默認(rèn)的thunk就夠用了。我在例子里加了個(gè)log的中間層

// 打印觸發(fā)的action
function logMiddleware() {
  // 這里的next是下一個(gè)middleWare
  return function(next) {
    return function(action) {
      // 打印此action并使用下一個(gè)middleWare處理該action
      console.log(action);
      next(action);
    };
  };
}

export default logMiddleware;

// 下面是默認(rèn)的thunk middleWare

function thunkMiddleware(_ref) {
  var dispatch = _ref.dispatch;
  var getState = _ref.getState;

  return function (next) {
    return function (action) {
      // 如果是函數(shù)則將dispatch與getState作為參數(shù)執(zhí)行函數(shù)，否則交給寫一個(gè)middleware處理
      return typeof action === "function" ? action(dispatch, getState) : next(action);
    };
  };
}

其實(shí)redux不明白的地方直接看源碼更好，redux的代碼量很小而且組織也很清晰，建議大家都去看，不過作者貌似函數(shù)式編程的思維很重，大量使用修飾器的語法，還有reduce~ 挺繞的~

之后會(huì)總結(jié)自己閱讀redux源碼的一些心得，以及各功能模塊的實(shí)現(xiàn)原理~