簡(jiǎn)介
本文介紹 redux 的使用方法。
主要包括以下幾個(gè)部分
- redux 基本思路
- 單獨(dú)使用 redux
- 配合 react-redux 使用
- redux-devtools
- 使用修飾器
redux 基本思路
redux 是用來管理公共狀態(tài)，公共 state 都存放在 store 中碍论。使用 createStore() 方法新建一個(gè) store
直接修改容易引起誤操作，需要有條件的操作 store ，不能直接修改
使用 store.getState() 來獲取 state
使用 store.dispatch(action) 修改 state
使用 store.subscribe(listener) 實(shí)現(xiàn)監(jiān)聽，如果有改動(dòng)合蔽，進(jìn)行對(duì)應(yīng)的響應(yīng)操作
action 是一個(gè)對(duì)象，基本格式 { type: TEST, payload: { name: 'ddd' } }
action creator 是 action 生成函數(shù)介返，根據(jù)傳入的參數(shù)生成對(duì)應(yīng)的 action
redux 基本使用
redux 安裝命令：npm i redux --save
- 新建 reducer 文件
// action type
const COUNT_ADD = "數(shù)量增加"
const COUNT_MINUS = "數(shù)量減少"
// initial state
const initState = {
test: 'test'
count: 10
}
// reducer
export default function(state = initState, action) {
switch(action.type) {
case COUNT_ADD:
return {
...state,
count: state.count + 1
}
case COUNT_MINUS:
return {
...state,
count: state.count - 1
}
default:
return state
}
}
// action creator
export function countAdd() {
return { type: COUNT_ADD }
}
export function countMinus() {
return { type: COUNT_MINUS }
}
- 如果有多個(gè) reducer 拴事，可以使用 combineReducers 方法將多個(gè) reducer 合并成一個(gè)
import { combineReducers } from 'redux'
import app from './app'
import user from './user'
export default combineReducers({ app, user })
- 使用 createStore 生成 store
import { createStore } from 'redux'
import rootReducer from './reducers'
export default createStore(rootReducer)
// 使用中間件
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
export default createStore(rootReducer, applyMiddleware(thunk))
單獨(dú)使用 redux
const init = store.getState()
console.log(init)
function listener() {
const { count } = store.getState()
console.log(`目前計(jì)數(shù)為：${count}`)
}
store.subscribe(listener)
// 派發(fā)事件
store.dispatch(countAdd())
store.dispatch(countAdd())
store.dispatch(countMinus())
配合 react-redux 使用
在 react 項(xiàng)目中一般配合 react-redux 使用
react-redux 安裝命令：npm i react-redux --save
- react-redux 提供了
Provider，該組件將 store 放到 context 中圣蝎，方便子孫組件直接使用 store - react-redux 提供了
connect(mapStateToProps, mapDispatchToProps)用來將對(duì)應(yīng)的 state 和 dispatch 放到組件的 props 下
// ...
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
import React from 'react'
import { connect } from 'react-redux'
import { countAdd, countMinus } from '../../store/reducers/app'
import { WingBlank, WhiteSpace,Button } from 'antd-mobile'
class Demo extends React.Component {
render() {
return (
<WingBlank style={{marginTop: 50}}>
<p>目前計(jì)數(shù)：{this.props.count}</p>
<WhiteSpace />
<Button type="warning" onClick={this.props.countAdd}>+1</Button>
<WhiteSpace />
<Button type="primary" onClick={this.props.countMinus}>-1</Button>
</WingBlank>
)
}
}
export default connect(
({ app }) => app,
{ countAdd, countMinus }
)(Demo)
備注：
- connect 高級(jí)組件處理之后刃宵，在 props 中就有對(duì)應(yīng)的 state 和 action 了
- connect 的第一個(gè)參數(shù)是將 state 轉(zhuǎn)為 props 的方法 mapStateToProps ，當(dāng)然也可以直接傳對(duì)象
- connect 的第二個(gè)參數(shù)是將 dispatch 轉(zhuǎn)為 props 的方法 mapDispatchToProps 捅彻，當(dāng)然也可以直接傳對(duì)象
redux-devtools
redux-devtools 是谷歌瀏覽器的插件组去，方便調(diào)試
需要在代碼中打開
// 沒有中間件時(shí)開啟devToolsExtension
import { createStore } from 'redux'
import rootReducer from './reducers'
export default createStore(rootReducer, window.devToolsExtension ? window.devToolsExtension() : f=>f)
// 使用中間件并開啟devToolsExtension
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
export default createStore(rootReducer, compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f=>f
))
使用修飾器
修飾器相關(guān)知識(shí)參考：裝飾器模式（Decorator模式）理解、使用
create-react-app 項(xiàng)目為例：
如果 babel 版本低于 7.x 步淹，需要下載babel-plugin-transform-decorators-legacy ：
npm i babel-plugin-transform-decorators-legacy --save
- 修改 package.json 文件
{
// ...
"babel": {
// ...
"plugins": [
"transform-decorators-legacy"
// ...
]
},
// ...
}
如果是 babel 7.x 及以上版本，需要下載 @babel/plugin-proposal-decorators ：
npm i @babel/plugin-proposal-decorators --save
- 修改 package.json 文件
{
// ...
"babel": {
// ...
"plugins": [
// ...
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
},
// ...
}
- 在組件中 connect 就可以使用修飾器格式了诚撵。其他的缭裆，比如 withRouter 都可以用修飾器格式
// ...
@connect(
({ test }) => ({ count: test.count}),
{ testCountAdd }
)
class Demo extends React.Component {
// ...
}
export default Demo
