Redux使用必修秘笈

文章目录
前言
本文对redux相关使用的总结,利用一个简单的计数器应用介绍来flux、redux、react-redux、redux-actions等相关类库的使用。
初始代码 以下是该示例的初始代码,一个不使用redux的普通计数器应用。
import React from 'react' class Calculate extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } increase = () => { this.setState({ count: this.state.count + 1 }) } decrease = () => { this.setState({ count: this.state.count - 1 }) } render() { return( <div> <h1>{this.state.count}</h1> <div> <button type="button" onClick={this.increase}>Increase</button> <button type="button" onClick={this.decrease}>Decrease</button> </div> </div> ) }} export default Calculate
Flux
React是单向数据流,组件状态的维护是靠父子组件之间逐层传递来实现的,当应用层级较深时,这种方式就会显得比较繁琐。对此,社区提出了不少解决的方案,目前的最佳实践是Redux。
Redux严格意义上来讲是Flux的一种简洁的实现,在介绍Redux之前,我们先使用flux来重构这个计数器应用。
Flux主要流程有4部分,action、dispatcher、store、view,在该示例中我们需要使用到flux和events两个npm包来实现。
首先,在基础模板上建立目录如下
【原文无图,抱歉】
actionType.js用来定义常量,然后导出,该示例有加和减两种action。
export const INCREASE = 'INCREASE' export const DECREASE = 'DECREASE' dispatcher.js用来定义dispatcher并导出 import { Dispatcher } from 'flux' class CalculateDispatcherClass extends Dispatcher { handleAction(action) { this.dispatch({ type: action.type, payload: action.payload }) }} const CalculateDispatcher = new CalculateDispatcherClass() export default CalculateDispatcher action.js使用导入的action类别以及上面定义的dispatcher来定义action。 import { INCREASE, DECREASE} from '../constants/actionTypes' import CalculateDispatcher from '../dispatcher/dispatcher' const action = { increase(value = 1) { CalculateDispatcher.handleAction({ type: INCREASE, payload: value }) }, decrease(value = 1) { CalculateDispatcher.handleAction({ type: DECREASE, payload: value }) }} export default action
最后在store.js中整合
import CalculateDispatcher from '../dispatcher/dispatcher' import { EventEmitter } from 'events' import { INCREASE, DECREASE} from '../constants/actionTypes' const store = { count: 0} class CalculateStoreClass extends EventEmitter { addIncreaseListener(callBack) { this.on(INCREASE, callBack) } addDecreaseListener(callBack) { this.on(DECREASE, callBack) } getStore() { return store }} const CalculateStore = new CalculateStoreClass() CalculateDispatcher.register((action) => { switch(action.type) { case INCREASE: store.count += action.payload CalculateStore.emit(INCREASE) break case DECREASE: store.count -= action.payload CalculateStore.emit(DECREASE) break default: return true } return true }) export default CalculateStore
最后calculate.js存放我们的视图组件
import React from 'react' import Store from '../store/store' import Action from '../action/action' class Calculate extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } componentDidMount() { Store.addDecreaseListener(this.updateState) Store.addIncreaseListener(this.updateState) } updateState = () => { this.setState({ count: Store.getStore().count }) } increase = () => { Action.increase() } decrease = () => { Action.decrease() } render() { return( <div> <h1>{this.state.count}</h1> <div> <button type="button" onClick={this.increase}>Increase</button> <button type="button" onClick={this.decrease}>Decrease</button> </div> </div> ) }}export default Calculate
Redux
了解来Flux之后,就可以使用Redux了,Redux和Flux的不同在与将dispatcher换成了reducer
首先看一下项目结构,与flux的基本没有区别,只是将dispatcher换成了reducer
该示例中不仅使用了redux, 还使用了react-redux,使得redux和react项目更容易结合,使用了redux-actions,使action和reducer中类型的判断更加简单。
actionType.js
export const INCREASE = 'INCREASE' export const DECREASE = 'DECREASE' action.js 利用redux-actions来创建action import { INCREASE, DECREASE} from '../constants/actionTypes' import { createActions} from 'redux-actions' const Action = createActions({ [INCREASE]: (value = 1) => ({ payload: value }), [DECREASE]: (value = 1) => ({ payload: value })}) export default Action
reducer.js 同样,利用redux-actions来处理reducer
import { INCREASE, DECREASE } from '../constants/actionTypes' import { handleActions} from 'redux-actions' const reducer = handleActions({ [INCREASE]: (state, action) => (Object.assign({}, state, { count: state.count + action.payload.payload})), [DECREASE]: (state, action) => (Object.assign({}, state, { count: state.count - action.payload.payload}))}, { count: 0}) export default reducer
store.js 利用redux创建store
import { createStore } from 'redux' import reducer from '../reducer/reducer' const store = createStore(reducer) export default store
calculate.js 利用react-redux来连接react和redux
import React from 'react' import Action from '../action/action' import { connect } from 'react-redux' class Calculate extends React.Component { increase = () => { this.props.increase() } decrease = () => { this.props.decrease() } render() { return( <div> <h1>{this.props.count}</h1> <div> <button type="button" onClick={this.increase}>Increase</button> <button type="button" onClick={this.decrease}>Decrease</button> </div> </div> ) }} const mapStateToProps = (state) => { return { count: state.count }} export default connect(mapStateToProps, Action)(Calculate)
最后,在App.js中使用Provider将store传入
import React from 'react' import Calculate from './component/calculate' import { Provider } from 'react-redux' import store from './store/store' class App extends React.Component { render() { return ( <Provider store={store}> <Calculate /> </Provider> ) }} export default App
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
- 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓)。
- 关注公众号「入坑互联网」,不定期分享原创知识。
- 也看看其它文章
– END –
结伴同行前端路

关注后加群
原文出处:微信公众号【 菜头同学 入坑互联网】
原文链接:https://mp.weixin.qq.com/s/78rFozb-l4RQSXarG-4JEQ
本文观点不代表Dotnet9立场,转载请联系原作者。