摘要：地址應(yīng)用是一個狀態(tài)機，視圖與狀態(tài)是一一對應(yīng)的。只是把和聯(lián)系在一起的對象，并不是傳統(tǒng)意義上象征數(shù)據(jù)的東西。提供方法獲取提供方法更新這是一條新聞通過注冊監(jiān)聽器通過返回的函數(shù)注銷監(jiān)聽器。該回調(diào)函數(shù)必須返回一個純對象，這個對象會與組件的合并。

gif地址

Web 應(yīng)用是一個狀態(tài)機，視圖與狀態(tài)是一一對應(yīng)的。

所有的狀態(tài)，保存在一個對象里面。

redux不依賴于react

就是app中數(shù)據(jù)組成的樹，也是一個普通的js對象。樹的結(jié)構(gòu)根據(jù)應(yīng)用的需要自行決定，官方推薦的方式是分為三種數(shù)據(jù)：

后端提供的應(yīng)用數(shù)據(jù)

應(yīng)用狀態(tài)數(shù)據(jù) （某條數(shù)據(jù)是否選中）

ui組件的數(shù)據(jù)（彈窗是否打開）

action是一個描述“發(fā)生了什么”的普通對象
action是我們開發(fā)的應(yīng)用程序和store間通信的信息，它就是普通的js對象，結(jié)構(gòu)是自定義的，信息量應(yīng)盡可能小。
例如：

{
  type: "ADD_NEWS",
  text: "這是一條新聞"
}

action創(chuàng)建函數(shù)

function addNews(text) {
  return {
    type: "ADD_NEWS",
    text
  }
}

reducer是根據(jù)action來返回一個全新state的純函數(shù)。

function newsReducer(state = initialState, action) {
  switch (action) {
      case: "ADD_NEWS":
        return [...state, text]
        break;
    default:
        return state;
  }
}

store只是把actions和reducers聯(lián)系在一起的對象，并不是傳統(tǒng)意義上象征數(shù)據(jù)的東西。

const store = createStore(rootReducer, defaultState)

提供 getState() 方法獲取 state
提供 dispatch(action) 方法更新 state； store.dispatch(addNews("這是一條新聞"))
通過 subscribe(listener) 注冊監(jiān)聽器
通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器。

component只關(guān)注展示層。
container是通過connect方法把redux和展示組件關(guān)聯(lián)起來的東西。

combineReducers(reducers)
傳入reducers作為參數(shù)， reducers是一個object,如 {news: function() {...}, blogs: function() {...}}
返回一個遍歷執(zhí)行所有reducers的reducer函數(shù)，每個reducer只處理state中對應(yīng)自己key的部分.

bindActionCreator

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

bindActionCreators就是把多個actionCreator變成會去執(zhí)行dispatch的函數(shù)，并且返回這個對象。

連接 React 組件與 Redux store。連接操作不會改變原來的組件類。反而返回一個新的已與 Redux store 連接的組件類。

1.mapStateToProps
如果定義該參數(shù)，組件將會監(jiān)聽 Redux store 的變化。任何時候，只要 Redux store 發(fā)生改變，mapStateToProps 函數(shù)就會被調(diào)用。該回調(diào)函數(shù)必須返回一個純對象，這個對象會與組件的 props 合并。如果你省略了這個參數(shù)，你的組件將不會監(jiān)聽 Redux store。如果指定了該回調(diào)函數(shù)中的第二個參數(shù) ownProps，則該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新的 props，mapStateToProps 也會被調(diào)用（例如，當(dāng) props 接收到來自父組件一個小小的改動，那么你所使用的 ownProps 參數(shù)，mapStateToProps 都會被重新計算）

// 把state上的todos綁定到 組件.props.todos
function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps)(TodoApp)

2.mapDispatchToProps
(Object or Function): 如果傳遞的是一個對象，那么每個定義在該對象的函數(shù)都將被當(dāng)作 Redux action creator，而且這個對象會與 Redux store 綁定在一起，其中所定義的方法名將作為屬性名，合并到組件的 props 中。如果傳遞的是一個函數(shù)，該函數(shù)將接收一個 dispatch 函數(shù)，然后由你來決定如何返回一個對象，這個對象通過 dispatch 函數(shù)與 action creator 以某種方式綁定在一起（提示：你也許會用到 Redux 的輔助函數(shù) bindActionCreators()）。如果你省略這個 mapDispatchToProps 參數(shù)，默認情況下，dispatch 會注入到你的組件 props 中。如果指定了該回調(diào)函數(shù)中第二個參數(shù) ownProps，該參數(shù)的值為傳遞到組件的 props，而且只要組件接收到新 props，mapDispatchToProps 也會被調(diào)用。

export function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

// 下面兩種方式效果一致
var App = connect(mapStateToProps, actionCreators)(Main);
var App = connect(mapStateToProps, mapDispatchToProps)(Main);

包裹Provider讓所有container都能訪問store

store.dispath(action)會執(zhí)行reducer(currentState, action)并return action。原生的dipatch只支持普通js對象來作為參數(shù)，否則會報錯。

它提供的是位于 action 被發(fā)起之后，到達 reducer 之前的擴展點。（？）
其實就是在dispatch前后做一些額外的事情的一個函數(shù)，這個函數(shù)就是middleware, 有多個middlewares也就是嵌套地執(zhí)行這多個函數(shù)。

const logger = ({ dispatch, getState }) => next => action => {
  console.log("dispatching", action)
  let result = next(action)
  console.log("next state", getState())
  return result
}


export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

const middlewares = [logger]

const store = createStore(
  reducer,
  applyMiddleware(...middlewares)
)

通過redux middleware實現(xiàn)支持dispatch一個函數(shù)。

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

stackoverflow上的介紹。
容器組件和展示組件相分離