Redux状态管理5 使用react-redux

Redux状态管理5 使用react-redux

忘记subscribe，记住reducer，action和dispatch即可。不需要使用props传递

react-redux提供provider和connect两个接口来链接

安装

yarn add react-redux

使用

Provider组件在应用最外层，传入store即可，只用一次

Connect负责从外部获取组件需要的参数

Connect可以用装饰器的方式来写

// index.js
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'

import { createStore, applyMiddleware, compose } from 'redux'

import { counter} from './index.redux'

const store = createStore(counter, compose(
applyMiddleware(thunk)
))

ReactDOM.render(
(<Provider store={store}>
<App />
</Provider>),
document.getElementById('root')
)

// App.js
import { connect } from 'react-redux'
import {addNum, reduceNum, addNumAsync} from './index.redux'
class App extends Component {
render() {
return (
<div>
<button onClick={this.props.addNum}>增加</button>
<button onClick={this.props.addNumAsync}>延迟增加</button>
<button onClick={this.props.reduceNum}>减少</button>
<div>现在有{this.props.num}</div>
</div>
)
}
}
// 返回state中需要的数据num
// 将属性赋给props
const mapStateProps = (state) => {
return {num: state}
}

// 将方法赋给props
const actionCreators = {addNum, reduceNum, addNumAsync}

App = connect(mapStateProps, actionCreators)(App) // 装饰器，返回的App已经是一个新的组件
export default App

改写App.js中的connect装饰器

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {addNum, reduceNum, addNumAsync} from './index.redux'

// 改写connect
@connect(
// 需要state的什么属性，放到props里
state=> ({num: state.counter}),
// 需要什么方法，放到props里，自动dispatch
{addNum, reduceNum, addNumAsync}
)

class App extends Component {
render() {
return (
<div>
<button onClick={this.props.addNum}>增加</button>
<button onClick={this.props.addNumAsync}>延迟增加</button>
<button onClick={this.props.reduceNum}>减少</button>
<div>现在有{this.props.num}</div>
</div>
)
}
}

export default App

// index.redux.js
const ADD_NUM = 'Add'
const REDUCE_NUM = 'Reduce'

// reducer
export function counter(state=0, action) {
switch(action.type) {
case ADD_NUM:
return state+1
case REDUCE_NUM:
return state-1
default:
return 10
}
}

// action creator
export function addNum () {
return {type: ADD_NUM}
}

export function reduceNum () {
return {type: REDUCE_NUM}
}

export function addNumAsync () {
return dispatch => {
setTimeout(() => {
dispatch(addNum())
}, 2000)
}
}