目录

简介

redux 基本思路

redux 基本使用

单独使用 redux

配合 react-redux 使用

redux-devtools

使用修饰器

---

简介

本文介绍 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