1. createStore(reducer, [initState, enhancer])
- 作用：創(chuàng)建一個Redux store來存放應(yīng)用中所有的state绞呈，一個應(yīng)用只能有個store。函數(shù)返回store對象间景。
- 參數(shù)：
- reducer(Function)：兩個參數(shù)：state和action佃声，返回一個state。 不要對參數(shù)state進(jìn)行修改倘要，需要返回一個新的對象圾亏。
- initStatate：初始state。如果不為空封拧，需要和reducer中處理的state結(jié)構(gòu)一致
- 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是用來維持應(yīng)用所有state樹的一個對象泽西。改變state的唯一方法是store dispatch一個action曹铃。
Store不是類，而只是一個有幾個方法的對象捧杉，可以采用createStore進(jìn)行創(chuàng)建陕见。
- getState()
返回應(yīng)用當(dāng)前的 state 樹。它與 store 的最后一個 reducer 返回值相同味抖。 - dispatch(action)
分發(fā)action评甜，這是改變state的唯一方法。 - subscribe(listener)
添加一個變化監(jiān)聽器非竿，每當(dāng) dispatch action 的時候就會執(zhí)行蜕着，state 樹中的一部分可能已經(jīng)變化。你可以在回調(diào)函數(shù)里調(diào)用 getState() 來拿到當(dāng)前 state红柱。函數(shù)返回一個解綁的函數(shù)”统耍可以參考counter-vanilla - replaceReducer(nextReducer)
替換Reducer锤悄，用處較少。
// 渲染和訂閱渲染
function render() {
valueEl.innerHTML = store.getState().toString()
}
store.subscribe(render)
3. combineReducers(reducers)
combineReducers輔助函數(shù)的作用是嘉抒，把一個由多個不同 reducer 函數(shù)作為 value 的 object零聚，合并成一個最終的 reducer 函數(shù)，然后就可以對這個 reducer 調(diào)用 createStore。
多個子reducer函數(shù)合并后隶症，相當(dāng)于整體函數(shù)會為state特定字段進(jìn)行映射產(chǎn)生特定的reducer函數(shù)政模。 如頁面中的例子；todos和counter只會處理對應(yīng)字段過來的action蚂会。
4. applyMiddleware(...middlewares)
輸入一個middlewares數(shù)組淋样，返回一個函數(shù)，函數(shù)以createStore為參數(shù)：
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)
// 調(diào)用 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
函數(shù)作為命名參數(shù)彪见，并返回一個函數(shù)儡司。該函數(shù)會被傳入 被稱為 next 的下一個 middleware 的 dispatch 方法，并返回一個接收 action 的新函數(shù)余指，這個函數(shù)可以直接調(diào)用next(action)捕犬，或者在其他需要的時刻調(diào)用，甚至根本不去調(diào)用它酵镜。調(diào)用鏈中最后一個 middleware 會接受真實(shí)的 store 的 dispatch
方法作為 next 參數(shù)碉碉，并借此結(jié)束調(diào)用鏈。所以笋婿，middleware 的函數(shù)簽名是 ({ getState, dispatch }) => next => action誉裆。
5. bindActionCreators(actionCreators,dispatch)
經(jīng)過bindActionCreators處理的actions，直接調(diào)用函數(shù)就相當(dāng)于進(jìn)行了dispatch缸濒，因而實(shí)現(xiàn)了不調(diào)用dispatch即可觸發(fā)state的改變足丢。
使用場景： 當(dāng)你需要把 action creator 往下傳到一個組件上，卻不想讓這個組件覺察到 Redux 的存在庇配，而且不希望把 Redux store 或 dispatch
傳給它斩跌。
// app.js
import { selectReddit } from '../actions'
...
class App extends Component {
render() {
const { selectedReddit, posts, isFetching, lastUpdated, dispatch } = this.props
let boundActionCreators = bindActionCreators({selectReddit}, dispatch);
return (
<div>
<Picker value={selectedReddit}
onChange={this.handleChange}
{...boundActionCreators}
options={[ 'reactjs', 'frontend' ]} />
</div>
)
}
}
export default connect(mapStateToProps)(App)
// picker.js
export default class Picker extends Component {
render() {
const { value, onChange, options, selectReddit } = this.props
console.log(this.props)
return (
<span>
<h1>{value}</h1>
<select onChange={e => selectReddit(e.target.value)}
value={value}>
{options.map(option =>
<option value={option} key={option}>
{option}
</option>)
}
</select>
</span>
)
}
}
可以參考文章。
6. compose(...functions)
從右到左來組合多個函數(shù)捞慌。
這是函數(shù)式編程中的方法耀鸦，為了方便，被放到了 Redux 里啸澡。 當(dāng)需要把多個 store 增強(qiáng)器 依次執(zhí)行的時候袖订，需要用到它。
參考文章：文章
7. <Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])
<Provider store>使組件層級中的 connect()方法都能夠獲得 Redux store嗅虏。正常情況下洛姑，你的根組件應(yīng)該嵌套在 <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 創(chuàng)建函數(shù)是我們想要通過 props 獲取的？
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(TodoActions, dispatch)
}
}
mergeProps和options： 再議
