react和redux中的幾種常用的方法

1. createStore(reducer, [initState, enhancer])------redux中的方法
  • 作用:創建一個Redux store來存放應用中所有的state,一個應用只能有個store。函數返回store對象。
  • 參數:
    • reducer(Function):兩個參數:state和action,返回一個state。 不要對參數state進行修改,需要返回一個新的對象。
    • initStatate:初始state。如果不爲空,需要和reducer中處理的state結構一致
    • enhancer:一箇中間件,如logger等。
      例如:
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'
import api from '../middleware/api'
import rootReducer from '../reducers'
import DevTools from '../containers/DevTools'

export default function configureStore(preloadedState) {
  const store = createStore(
    rootReducer,
    preloadedState,
    compose(
      applyMiddleware(thunk, api, createLogger()),
      DevTools.instrument()
    )
  )
  return store
}
2. Store

Store是用來維持應用所有state樹的一個對象。改變state的唯一方法是store dispatch一個action。
Store不是類,而只是一個有幾個方法的對象,可以採用createStore進行創建。

  • getState()
    返回應用當前的 state 樹。它與 store 的最後一個 reducer 返回值相同。
  • dispatch(action)
    分發action,這是改變state的唯一方法。
  • subscribe(listener)
    添加一個變化監聽器,每當 dispatch action 的時候就會執行,state 樹中的一部分可能已經變化。你可以在回調函數裏調用 getState() 來拿到當前 state。函數返回一個解綁的函數。可以參考counter-vanilla
  • replaceReducer(nextReducer)
    替換Reducer,用處較少。
    // 渲染和訂閱渲染
    function render() {
        valueEl.innerHTML = store.getState().toString()
    }
    store.subscribe(render)
3. combineReducers(reducers)

combineReducers輔助函數的作用是,把一個由多個不同 reducer 函數作爲 value 的 object,合併成一個最終的 reducer 函數,然後就可以對這個 reducer 調用 createStore。
多個子reducer函數合併後,相當於整體函數會爲state特定字段進行映射產生特定的reducer函數。 如頁面中的例子;todos和counter只會處理對應字段過來的action。

4. applyMiddleware(...middlewares)

輸入一個middlewares數組,返回一個函數,函數以createStore爲參數:

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

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

    return {
      ...store,
      dispatch
    }
  }
}

使用示例:

import { createStore, applyMiddleware } from 'redux'
import todos from './reducers'

function logger({ getState }) {
  return (next) => (action) => {
    console.log('will dispatch', action)

    // 調用 middleware 鏈中下一個 middleware 的 dispatch。
    let returnValue = next(action)

    console.log('state after dispatch', getState())

    // 一般會是 action 本身,除非
    // 後面的 middleware 修改了它。
    return returnValue
  }
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)
let store = createStoreWithMiddleware(todos, [ 'Use Redux' ])

每個 middleware 接受 Store 的 dispatch 和 getState 函數作爲命名參數,並返回一個函數。該函數會被傳入 被稱爲 next 的下一個 middleware 的 dispatch 方法,並返回一個接收 action 的新函數,這個函數可以直接調用next(action),或者在其他需要的時刻調用,甚至根本不去調用它。調用鏈中最後一個 middleware 會接受真實的 store 的 dispatch 方法作爲 next 參數,並藉此結束調用鏈。所以,middleware 的函數簽名是 ({ getState, dispatch }) => next => action。

5. bindActionCreators(actionCreators,dispatch)

經過bindActionCreators處理的actions,直接調用函數而不需調用dispatch即可觸發state的改變。
可以參考文章

6. compose(...functions)

從右到左來組合多個函數。
這是函數式編程中的方法,爲了方便,被放到了 Redux 裏。 當需要把多個 store 增強器 依次執行的時候,需要用到它。
參考文章:文章

7. <Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])

<Provider store>使組件層級中的 connect()方法都能夠獲得 Redux store。正常情況下,你的根組件應該嵌套在 <Provider>中才能使用 connect()方法。

ReactDOM.render(
  <Provider store={store}>
    <MyRootComponent />
  </Provider>,
  rootEl
);

connect: 連接 React 組件與 Redux store。

// mapStateToProps: 哪些 Redux 全局的 state 是我們組件想要通過 props 獲取的?
function mapStateToProps(state) {
  return {
    todos: state.todos
  }
}
 // mapDispatchToProps: 哪些 action 創建函數是我們想要通過 props 獲取的?
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch)
  }
}
  mergeProps和options: 再議

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章