简介
本文介绍 redux 的使用方法。
主要包括以下几个部分
- redux 基本思路
- 单独使用 redux
- 配合 react-redux 使用
- redux-devtools
- 使用修饰器
redux 基本思路
redux 是用来管理公共状态，公共 state 都存放在 store 中。使用 createStore() 方法新建一个 store
直接修改容易引起误操作，需要有条件的操作 store ，不能直接修改
使用 store.getState() 来获取 state
使用 store.dispatch(action) 修改 state
使用 store.subscribe(listener) 实现监听，如果有改动，进行对应的响应操作
action 是一个对象，基本格式 { type: TEST, payload: { name: 'ddd' } }
action creator 是 action 生成函数，根据传入的参数生成对应的 action
redux 基本使用
redux 安装命令：npm i redux --save
- 新建 reducer 文件
// action type
const COUNT_ADD = "数量增加"
const COUNT_MINUS = "数量减少"
// 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 }
}
- 如果有多个 reducer ，可以使用 combineReducers 方法将多个 reducer 合并成一个
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))
单独使用 redux
const init = store.getState()
console.log(init)
function listener() {
const { count } = store.getState()
console.log(`目前计数为：${count}`)
}
store.subscribe(listener)
// 派发事件
store.dispatch(countAdd())
store.dispatch(countAdd())
store.dispatch(countMinus())
配合 react-redux 使用
在 react 项目中一般配合 react-redux 使用
react-redux 安装命令：npm i react-redux --save
- react-redux 提供了
Provider，该组件将 store 放到 context 中，方便子孙组件直接使用 store - react-redux 提供了
connect(mapStateToProps, mapDispatchToProps)用来将对应的 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>目前计数：{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 高级组件处理之后，在 props 中就有对应的 state 和 action 了
- connect 的第一个参数是将 state 转为 props 的方法 mapStateToProps ，当然也可以直接传对象
- connect 的第二个参数是将 dispatch 转为 props 的方法 mapDispatchToProps ，当然也可以直接传对象
redux-devtools
redux-devtools 是谷歌浏览器的插件，方便调试
需要在代码中打开
// 没有中间件时开启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
))
使用修饰器
修饰器相关知识参考：装饰器模式（Decorator模式）理解、使用
create-react-app 项目为例：
如果 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
