【React.js 07】React中使用Redux

2018-04-01 本文已影响105人 IUVO

上一篇中，我们简单讲了Redux的使用，但是，如何规范的在React中去使用Redux呢，这篇文章里我们会讲到，但是，也是一个痛苦的不适用的方式，它采用手动连接Redux和React，繁琐，不易读，但是作为自学的笔记，我还是要把这一步给写下来。

那么什么叫规范呢？

组件化还是王道！所以，我们要把store.dispatch方法传递给组件，让对应的组件在自己内部去调用修改状态。
subscribe去订阅render函数，监听并自动刷新渲染。
把Redux相关内容，移到单独的文件index.redux.js去单独管理

开始写代码：

create-react-app去创建项目，npm安装redux
清除./src目录中所有文件
./src目录中创建一个名为index.redux.js的文件，把和Redux相关的内容移至文件中，首先抽出reducer定义的代码到index.redux.js文件中，并向外暴露出以供外部使用reducer来生成store：

// 定义成常量，尽量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'

// 导出并且定义reducer
export function manageCompany(total = 1, action) {
  switch (action.type) {
    case HIRE:
      return total + 1;
    case FIRE:
      return total - 1;
    default:
      return 1;
  }
}

原来我们是手动给store.dispatch()传参一个action type对象，现在我们把其改成：调用方法返回对应action type对象，并且移至index.redux.js文件，并export出来供外部调用，这些函数也成为action creator：

// type为HIRE的action
export function hire() {
  return {type : HIRE}
}
// type为FIRE的action
export function fire() {
  return {type : FIRE}
}

这样，我们就把跟reducer相关的内容(reducer&action creator)都移到了index.redux.js文件中。

接下来就是在外部使用这个封装的index.redux.js文件了，此案例中我们直接在index.js中使用，首先还是创建store对象，那么我们需要createStore()方法以及相应的reducer：

import { createStore } from 'redux'
import { manageCompany } from './index.redux'

// 通过reducer创建store
const store = createStore(manageCompany)

然后在index.js中，去渲染组件，并且由于组件需要store对象去获取状态以及派发事件，我们要把创建的store对象传给组件，为了让subscribe能够去调用，我们把渲染动作再封装在一个方法中：

// 定义一个render()函数去渲染页面，把store和对应的方法都传给组件App
function render() {
  ReactDom.render(
    <App store={store} hire={hire()} fire={fire()}/>,
    document.getElementById('root')
  )
}

./src目录中创建一个名为App.js的组件，用以演示subscribe自动渲染的效果，并且组件内部去触发修改，调用传入的store对象的dispatch()方法。

import React , { Component } from 'react'
//由于组件需要store对象去获取状态以及派发事件，所以我们用属性的方式传入一个store对象
class App extends Component {
  handlerCompanyManagement(action) {
    this.props.store.dispatch(action)
    console.log(`公司现在有${this.props.store.getState()}人`);
  }

  render() {
    const store = this.props.store
    return (
      <div>
        <h1>公司现在有{store.getState()}人</h1>
        <p onClick={this.handlerCompanyManagement.bind(this,this.props.hire)}>雇佣一人</p>
        <p onClick={this.handlerCompanyManagement.bind(this,this.props.fire)}>开除一人</p>
      </div>
    )
  }
}
export default App

最后，每次点击雇佣一人或者开除一人触发的事件，就会根据传入的方法返回的action type去调用reducer产生新的状态，也就对应的实现了状态变更，然后就是自动根据状态的修改去刷新显示了：

//我们把`index.js`中封装的`render`方法中，所以需要先手动调用一次才能看到显示
render()

// 然后再把render方法传入subscribe作为监听变化时自动刷新调用的方法
store.subscribe(render)

手动调用一次时的显示

点击雇佣一人后自动刷新的显示

react连接redux的步骤梳理：
1、封装了reducer相关的内容的文件中，需要export出对应的reducer供外部创建store，并且，提供action creator去返回action type。
2、外部组件中，我们新建store，还有导入reducer中export出的action creator返回的action type，都以组件属性的形式传给组件，再用subscribe订阅变化时执行的函数。
3、组件内部通过属性获取store，获取到了store也就相当于获取了状态(store.getState)，派发方法(store.dispatch)执行action
4、组件内部通过属性还获取了action creator返回的action type，触发派发方法(store.dispatch)根据action type（以及旧的state）就会生成新的state，同时外部的subscribe则会执行订阅的函数（一般是刷新渲染的函数），这样整个流程就完成了。

这样就基本实现了组件、redux分离的操作，但是这还是属于手动连接的范畴，依旧不是很方便。后面会讲到自动连接，会没那么痛苦。

上代码：

./src/index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { manageCompany, hire ,fire} from './index.redux'

// 通过reducer创建store
const store = createStore(manageCompany)

// 定义一个render()函数去渲染页面
function render() {
  ReactDom.render(
    <App store={store} hire={hire()} fire={fire()}/>,
    document.getElementById('root')
  )
}

// 先手动调用一次看看页面效果
render()

// 然后再把render方法传入subscribe作为监听变化时自动刷新调用的方法
store.subscribe(render)

./src/App.js

import React , { Component } from 'react'

class App extends Component {
  handlerCompanyManagement(action) {
    this.props.store.dispatch(action)
    console.log(`公司现在有${this.props.store.getState()}人`);
  }

  render() {
    const store = this.props.store
    return (
      <div>
        <h1>公司现在有{store.getState()}人</h1>
        <p onClick={this.handlerCompanyManagement.bind(this,this.props.hire)}>雇佣一人</p>
        <p onClick={this.handlerCompanyManagement.bind(this,this.props.fire)}>开除一人</p>
      </div>
    )
  }
}

export default App

./src/index.redux.js

// 定义成常量，尽量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'

// 导出并且定义reducer
export function manageCompany(total = 1, action) {
  switch (action.type) {
    case HIRE:
      return total + 1;
    case FIRE:
      return total - 1;
    default:
      return 1;
  }
}

// type为HIRE的action
export function hire() {
  return {type : HIRE}
}
// type为FIRE的action
export function fire() {
  return {type : FIRE}
}

【React.js 07】React中使用Redux

开始写代码：

上代码：

Done！

猜你喜欢

热点阅读