上一篇中，我們簡(jiǎn)單講了
Redux的使用栅哀，但是震肮，如何規(guī)范的在React中去使用Redux呢，這篇文章里我們會(huì)講到留拾，但是戳晌，也是一個(gè)痛苦的不適用的方式，它采用手動(dòng)連接Redux和React痴柔，繁瑣沦偎，不易讀，但是作為自學(xué)的筆記咳蔚，我還是要把這一步給寫(xiě)下來(lái)豪嚎。
那么什么叫規(guī)范呢？
- 組件化還是王道屹篓！所以疙渣，我們要把
store.dispatch方法傳遞給組件，讓對(duì)應(yīng)的組件在自己內(nèi)部去調(diào)用修改狀態(tài)堆巧。 -
subscribe去訂閱render函數(shù)妄荔，監(jiān)聽(tīng)并自動(dòng)刷新渲染。 - 把
Redux相關(guān)內(nèi)容谍肤，移到單獨(dú)的文件index.redux.js去單獨(dú)管理
開(kāi)始寫(xiě)代碼：
-
create-react-app去創(chuàng)建項(xiàng)目啦租，npm安裝redux - 清除
./src目錄中所有文件 -
./src目錄中創(chuàng)建一個(gè)名為index.redux.js的文件，把和Redux相關(guān)的內(nèi)容移至文件中荒揣，首先抽出reducer定義的代碼到index.redux.js文件中篷角，并向外暴露出以供外部使用reducer來(lái)生成store：
// 定義成常量，盡量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'
// 導(dǎo)出并且定義reducer
export function manageCompany(total = 1, action) {
switch (action.type) {
case HIRE:
return total + 1;
case FIRE:
return total - 1;
default:
return 1;
}
}
- 原來(lái)我們是手動(dòng)給
store.dispatch()傳參一個(gè)action type對(duì)象系任，現(xiàn)在我們把其改成：調(diào)用方法返回對(duì)應(yīng)action type對(duì)象恳蹲，并且移至index.redux.js文件，并export出來(lái)供外部調(diào)用俩滥，這些函數(shù)也成為action creator：
// type為HIRE的action
export function hire() {
return {type : HIRE}
}
// type為FIRE的action
export function fire() {
return {type : FIRE}
}
這樣嘉蕾，我們就把跟reducer相關(guān)的內(nèi)容(reducer&action creator)都移到了index.redux.js文件中。
- 接下來(lái)就是在外部使用這個(gè)封裝的
index.redux.js文件了霜旧，此案例中我們直接在index.js中使用错忱，首先還是創(chuàng)建store對(duì)象，那么我們需要createStore()方法以及相應(yīng)的reducer：
import { createStore } from 'redux'
import { manageCompany } from './index.redux'
// 通過(guò)reducer創(chuàng)建store
const store = createStore(manageCompany)
- 然后在
index.js中，去渲染組件以清，并且由于組件需要store對(duì)象去獲取狀態(tài)以及派發(fā)事件儿普，我們要把創(chuàng)建的store對(duì)象傳給組件，為了讓subscribe能夠去調(diào)用掷倔，我們把渲染動(dòng)作再封裝在一個(gè)方法中：
// 定義一個(gè)render()函數(shù)去渲染頁(yè)面眉孩，把store和對(duì)應(yīng)的方法都傳給組件App
function render() {
ReactDom.render(
<App store={store} hire={hire()} fire={fire()}/>,
document.getElementById('root')
)
}
-
./src目錄中創(chuàng)建一個(gè)名為App.js的組件，用以演示subscribe自動(dòng)渲染的效果勒葱，并且組件內(nèi)部去觸發(fā)修改勺像，調(diào)用傳入的store對(duì)象的dispatch()方法。
import React , { Component } from 'react'
//由于組件需要store對(duì)象去獲取狀態(tài)以及派發(fā)事件错森，所以我們用屬性的方式傳入一個(gè)store對(duì)象
class App extends Component {
handlerCompanyManagement(action) {
this.props.store.dispatch(action)
console.log(`公司現(xiàn)在有${this.props.store.getState()}人`);
}
render() {
const store = this.props.store
return (
<div>
<h1>公司現(xiàn)在有{store.getState()}人</h1>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.hire)}>雇傭一人</p>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.fire)}>開(kāi)除一人</p>
</div>
)
}
}
export default App
- 最后，每次點(diǎn)擊
雇傭一人或者開(kāi)除一人觸發(fā)的事件篮洁，就會(huì)根據(jù)傳入的方法返回的action type去調(diào)用reducer產(chǎn)生新的狀態(tài)涩维，也就對(duì)應(yīng)的實(shí)現(xiàn)了狀態(tài)變更，然后就是自動(dòng)根據(jù)狀態(tài)的修改去刷新顯示了：
//我們把`index.js`中封裝的`render`方法中袁波，所以需要先手動(dòng)調(diào)用一次才能看到顯示
render()
// 然后再把render方法傳入subscribe作為監(jiān)聽(tīng)變化時(shí)自動(dòng)刷新調(diào)用的方法
store.subscribe(render)
手動(dòng)調(diào)用一次時(shí)的顯示
點(diǎn)擊雇傭一人后自動(dòng)刷新的顯示
react連接redux的步驟梳理：
1瓦阐、封裝了reducer相關(guān)的內(nèi)容的文件中，需要export出對(duì)應(yīng)的reducer供外部創(chuàng)建store篷牌，并且睡蟋，提供action creator去返回action type。
2枷颊、外部組件中戳杀，我們新建store，還有導(dǎo)入reducer中export出的action creator返回的action type夭苗，都以組件屬性的形式傳給組件信卡，再用subscribe訂閱變化時(shí)執(zhí)行的函數(shù)。
3题造、組件內(nèi)部通過(guò)屬性獲取store傍菇，獲取到了store也就相當(dāng)于獲取了狀態(tài)(store.getState)，派發(fā)方法(store.dispatch)執(zhí)行action
4界赔、組件內(nèi)部通過(guò)屬性還獲取了action creator返回的action type丢习，觸發(fā)派發(fā)方法(store.dispatch)根據(jù)action type（以及舊的state）就會(huì)生成新的state，同時(shí)外部的subscribe則會(huì)執(zhí)行訂閱的函數(shù)（一般是刷新渲染的函數(shù)）淮悼，這樣整個(gè)流程就完成了咐低。
這樣就基本實(shí)現(xiàn)了組件、
redux分離的操作敛惊，但是這還是屬于手動(dòng)連接的范疇渊鞋，依舊不是很方便。后面會(huì)講到自動(dòng)連接，會(huì)沒(méi)那么痛苦锡宋。
上代碼：
./src/index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { manageCompany, hire ,fire} from './index.redux'
// 通過(guò)reducer創(chuàng)建store
const store = createStore(manageCompany)
// 定義一個(gè)render()函數(shù)去渲染頁(yè)面
function render() {
ReactDom.render(
<App store={store} hire={hire()} fire={fire()}/>,
document.getElementById('root')
)
}
// 先手動(dòng)調(diào)用一次看看頁(yè)面效果
render()
// 然后再把render方法傳入subscribe作為監(jiān)聽(tīng)變化時(shí)自動(dòng)刷新調(diào)用的方法
store.subscribe(render)
./src/App.js
import React , { Component } from 'react'
class App extends Component {
handlerCompanyManagement(action) {
this.props.store.dispatch(action)
console.log(`公司現(xiàn)在有${this.props.store.getState()}人`);
}
render() {
const store = this.props.store
return (
<div>
<h1>公司現(xiàn)在有{store.getState()}人</h1>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.hire)}>雇傭一人</p>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.fire)}>開(kāi)除一人</p>
</div>
)
}
}
export default App
./src/index.redux.js
// 定義成常量儡湾，盡量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'
// 導(dǎo)出并且定義reducer
export function manageCompany(total = 1, action) {
switch (action.type) {
case HIRE:
return total + 1;
case FIRE:
return total - 1;
default:
return 1;
}
}
// type為HIRE的action
export function hire() {
return {type : HIRE}
}
// type為FIRE的action
export function fire() {
return {type : FIRE}
}
