redux使用示例(逐渐完善、非hook)
不用 redux
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/app'
ReactDOM.render(<App/>, document.getElementById('root'))
// components/app.jsx
import React, {Component} from 'react'
export default class App extends Component {
state = {
count: 0
}
// 4个方法
increment = () => {
const num = this.refs.numSelect.value*1
const count = this.state.count + num
this.setState({count})
}
decrement = () => {
const num = this.refs.numSelect.value*1
const count = this.state.count - num
this.setState({count})
}
incrementIfOdd = () => {
let count = this.state.count
if(count%2==1) {
const num = this.refs.numSelect.value*1
count += num
this.setState({count})
}
}
incrementAsync = () => {
setTimeout(() => {
const num = this.refs.numSelect.value*1
const count = this.state.count + num
this.setState({count})
}, 1000)
}
render () {
return (
<div>
<p>
click {this.state} times {' '}
</p>
<select ref="numSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>{' '}
<button onClick={this.increment}>+</button>{' '}
<button onClick={this.decrement}>-</button>{' '}
<button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
<button onClick={this.incrementAsync}>increment async</button>
</div>
)
}
}
使用 redux
文件目录结构:*表示文件夹
src
*components
app.jsx
*redux
action-types.js
actions.js
reducers.js
store.js
index.js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/app'
import store from './redux/store'
// 定义渲染根组件标签的函数,抽成函数,方便下面的复用
const render = () => {
ReactDOM.render(<App store={store}/>, document.getElementById('root')) // 传入store
}
// 初始化渲染
render()
// 注册(订阅)监听, 一旦状态发生改变, 自动重新渲染
store.subscribe(render)
// components/app.jsx
/*
应用组件
*/
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import * as actions from '../redux/actions'
export default class App extends Component {
static propTypes = {
store: PropTypes.object.isRequired,
}
/* 4个方法 */
increment = () => {
const number = this.refs.numSelect.value * 1
this.props.store.dispatch(actions.increment(number)) // 调用store的方法更新状态
}
decrement = () => {
const number = this.refs.numSelect.value * 1
this.props.store.dispatch(actions.decrement(number)) // 调用store的方法更新状态
}
incrementIfOdd = () => {
const number = this.refs.numSelect.value * 1
let count = this.props.store.getState()
if (count % 2 === 1) {
this.props.store.dispatch(actions.increment(number)) // 调用store的方法更新状态
}
}
incrementAsync = () => {
const number = this.refs.numSelect.value * 1
setTimeout(() => {
this.props.store.dispatch(actions.increment(number)) // 调用store的方法更新状态
}, 1000)
}
render() {
const count = this.props.store.getState() // <App store={store}/> 传入了 store
return (
<div>
<p>
click {this.props.store.getState()} times {' '}
</p>
<select ref="numSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>{' '}
<button onClick={this.increment}>+</button>
{' '}
<button onClick={this.decrement}>-</button>
{' '}
<button onClick={this.incrementIfOdd}>increment if odd</button>
{' '}
<button onClick={this.incrementAsync}>increment async</button>
</div>
)
}
}
// redux/action-type.js
/*
Action对象的type常量名称模块
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
// redux/actions.js
/*
action creator模块
*/
import {INCREMENT, DECREMENT} from './action-types'
export const increment = number => ({type: INCREMENT, number})
export const decrement = number => ({type: DECREMENT, number})
// redux/reducers.js
/*
根据老的state和指定action, 处理返回一个新的state
*/
import {INCREMENT, DECREMENT} from './action-types'
export function counter(state = 0, action) {
switch (action.type) {
case INCREMENT:
return state + action.number
case DECREMENT:
return state - action.number
default:
return state
}
}
// redux/store.js
import {createStore} from 'redux'
import {counter} from './reducers'
// 生成一个store对象
const store = createStore(counter) // 内部会第一次调用reducer函数得到初始state=0
export default store
使用 react-redux
文件目录结构:*表示文件夹
src
*components
counter.jsx
*containers
app,jsx
*redux
action-types.js
actions.js
reducers.js
store.js
index.js
上述 redux 的版本中,redux 与 react 组件的代码耦合度太高,编码不够简洁。
redux/action-types.js 不变
redux/actions.js 不变
redux/reducers.js 不变
redux/store.js 不变
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux' // 导入 Provider
import App from './components/app'
import store from './redux/store'
ReactDOM.render((
// 不再渲染 <App>,使用 <Provider> 包裹
<Provider store={store}> // 参数也放在 <Provider> 中传递
<App/>
</Provider>
), document.getElementById('root'))
/* 不需要再订阅监听
// 注册(订阅)监听, 一旦状态发生改变, 自动重新渲染
store.subscribe(render)
*/
// containers/app.jsx
/*
包含counter组件的容器组件
*/
import React from 'react'
import {connect} from 'react-redux' // 引入连接函数
import {increment, decrement} from '../redux/actions' // 引入action函数
import Counter from '../components/counter' // 将逻辑代码抽出
// 向外暴露连接App组件的包装组件
export default connect(
state => ({count: state}),
{increment, decrement}
)(Counter)
// count 与 counter.jsx中声明的属性一致
// {increment, decrement} 相当于 {increment: increment, decrement: decrement} 第一个 increment 与 counter.jsx 中声明的属性一致,第二个 increment 与 action 中的方法名一致
// components/counter.jsx
/*
UI组件: 不包含任何redux API
*/
import React from 'react'
import PropTypes from 'prop-types'
export default class Counter extends React.Component {
// 声明需要的属性
static propTypes = {
count: PropTypes.number.isRequired,
increment: PropTypes.func.isRequired,
decrement: PropTypes.func.isRequired
}
/* 4个方法 */
increment = () => {
const number = this.refs.numSelect.value * 1
this.props.increment(number)
}
decrement = () => {
const number = this.refs.numSelect.value * 1
this.props.decrement(number)
}
incrementIfOdd = () => {
const number = this.refs.numSelect.value * 1
let count = this.props.count
if (count % 2 === 1) {
this.props.increment(number)
}
}
incrementAsync = () => {
const number = this.refs.numSelect.value * 1
setTimeout(() => {
this.props.increment(number)
}, 1000)
}
render() {
return (
<div>
<p>
click {this.props.count} times {' '}
</p>
<select ref="numSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>{' '}
<button onClick={this.increment}>+</button>
{' '}
<button onClick={this.decrement}>-</button>
{' '}
<button onClick={this.incrementIfOdd}>increment if odd</button>
{' '}
<button onClick={this.incrementAsync}>increment async</button>
</div>
)
}
}
使用 redux 异步(异步中间件)
其他的不变
// redux/store.js
import ...
// 根据counter函数创建store对象
export default createStore(
reducers,
composeWithDevTools(applyMiddleware(thunk)) // 启用异步中间件,否则action中默认只能return一个对象
)
// redux/actions.js
import {INCREMENT, DECREMENT} from './action-types'
// 同步的action返回的是一个对象
// 异步的action返回的是一个函数
export const increment = number => ({type: INCREMENT, number})
export const decrement = number => ({type: DECREMENT, number})
// 异步action creator(返回一个函数)
export const incrementAsync = number => {
return dispatch => { // 返回的是一个函数
// 异步代码
setTimeout(() => {
dispatch(increment(number)) // 分发action
}, 1000)
}
}
// containers/app.jsx (就增加了incrementAsync的引入和使用)
import ...
// 向外暴露连接App组件的包装组件
export default connect(
state => ({count: state.counter}),
{increment, decrement, incrementAsync}
)(Counter)
// components/counter.jsx
...就增加了incrementAsync的使用