Redux使用必修秘笈

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

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓)。
  2. 关注公众号「入坑互联网」,不定期分享原创知识。
  3. 也看看其它文章

前端进阶之路:如何高质量完成产品需求开发

面试题联盟之CSS篇

年底前端面试及答案-html/css

年底面试之es6总结

年底面试之JavaScript总结(用心收集)

– END –

结伴同行前端路

Redux使用必修秘笈
长按二维码
关注后加群

原文出处:微信公众号【 菜头同学 入坑互联网】

原文链接:https://mp.weixin.qq.com/s/78rFozb-l4RQSXarG-4JEQ

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论