React学习笔记6：使用react-redux更好的组织react和redux

新搭建的我的博客，本文地址：React学习笔记6：使用react-redux更好的组织react和redux
很久没有更新，一是最近太忙，二是redux我理解没那么深，从面相对象架构，要转变为函数式编程架构，以致于细节点拿不许，这个最小代码抽了好久才抽出来，并且不能保证理解彻底正确，因此也欢迎拍砖。

上一篇笔记，以最小化的代码模拟了redux的核心，actions、reduces如何运行，这篇笔记首先对上面的代码作初略的改造，把store放到组件外面，尽最大可能让组件独立

import React from 'react'
import ReactDom from 'react-dom'
import { createStore } from 'redux'
class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = { msg: 'Hello World!' }
    store.subscribe(() => {
      console.log('store_0 has been updated. Latest store state:', store.getState());
      // 更新你的React数据
      this.setState({ msg: store.getState().msg })
    })
  }

  changeLang = () => {
    //this.setState({msg:'您好,世界!'})
    store.dispatch(actions.sendShowChineseMsg())
    setTimeout(() => {
      store.dispatch(actions.sendShowEnglishMsg())
    }, 5000)
  }
  render() {
    return (
      <div>
        <button onClick={this.changeLang}>翻译</button> {this.state.msg}
      </div>
    )
  }
}

const reducer = (state = {}, action) => {
  console.log('reducer init state ', state, ' action ', action);
  switch (action.type) {
    case 'chinese':
      return {
        state,
        msg: '您好,世界!'
      }
    case 'english':
      return {
        state,
        msg: "Hello World!"
      }
    default:
      return state
  }
}

const actions = {
  sendShowChineseMsg: () => ({ type: 'chinese'}),
  sendShowEnglishMsg: () => ({ type: 'english'})
}

const store = createStore(reducer)

ReactDom.render(
  <Hello />,
  document.getElementById('example')
);

能够看到，不管如何store和组件仍是融合在一块儿，这其中主要是state传值，组件须要从store获取值，另外一个就是触发actions的click操做，须要dispatch，触发store的subscribe。

react-redux组件就是解决此问题。react-redux把组件外面再包一层，称之为container，container，组件不须要本身从store得到值，container直接传给组件，actions一样同样，都由container传递，这样组件就跟操做props同样，使用数值、函数，保证了组件的独立性。

包这一层就是使用的react-redux提供的connect函数，connect函数原型以下

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

暂且不关注第三第四个参数，第一参数mapStateToProps就是映射到组件内要传递的props，第二个mapDispatchToProps则是映射到组件内actions，connect函数返回一个函数wrapWithConnect(WrappedComponent)，该函数惟一参数是传递一个组件，须要被包起来的组件。

//首先安装react-redux组件
npm install --save react-redux

一、为了模拟react-redux工做，首先须要把组件拆分为两个，其中一个Button组件，用来发送消息，另一个组件就是展现信息

class Hello extends React.Component {
  render() {
    return (
      <span>{this.props.msg}</span>
    )
  }
}
//暂且将onClick放上，该函数是由mapTranslateDispatchToProps传递而来
class Translate extends React.Component {
  render() {
    return (
      <button onClick={this.props.sendMsg}>翻译</button>
    )
  }
}

二、利用connect绑定state到Hello组件，绑定actions到Translate组件

const mapHelloStateToProps = (state, ownProps) => {
  console.log('mapStateToProps', state, ownProps)
  return {
    msg: state.msg ? state.msg : ownProps.msg
  }
}
//该组件只是展现信息，不须要connect actions，故不须要第二个参数
const HelloWorld = connect(mapHelloStateToProps)(Hello)

const mapTranslateDispatchToProps = (dispatch, ownProps) => {
  return {
    sendMsg: () => {
      dispatch(actions.sendShowChineseMsg())
      setTimeout(() => dispatch(actions.sendShowEnglishMsg()), 5000)
    }
  }
}
//该组件须要发送actions msg，不须要state，第一个参数传递null
const TranslateButton  = connect(null, mapTranslateDispatchToProps)(Translate)

三、利用一个顶层组件，把两个组件串联起来

class App extends React.Component {
  render() {
    return (
      <div>
        <TranslateButton />
        <HelloWorld  msg="Hello World!" />
      </div>
    )
  }
}

四、利用react-redux的Provider组件，把store跟App组件连起来

ReactDom.render(
  <Provider store = {store}>
    <App />
  </Provider>,
  document.getElementById('example')
);

修改完毕后运行便可！
五、如下是完整代码，以后要对代码组织结构作一个调整

import React from 'react'
import ReactDom from 'react-dom'
import { createStore } from 'redux'
import {connect,Provider} from 'react-redux'
class Hello extends React.Component {
  render() {
    return (
      <span>{this.props.msg}</span>
    )
  }
}

class Translate extends React.Component {
  render() {
    return (
      <button onClick={this.props.sendMsg}>翻译</button>
    )
  }
}

const reducer = (state = {}, action) => {
  console.log('reducer init state ', state, ' action ', action);
  switch (action.type) {
    case 'chinese':
      return {
        state,
        msg: '您好,世界!'
      }
    case 'english':
      return {
        state,
        msg: "Hello World!"
      }
    default:
      return state
  }
}

const actions = {
  sendShowChineseMsg: () => ({ type: 'chinese' }),
  sendShowEnglishMsg: () => ({ type: 'english' })
}

const mapHelloStateToProps = (state, ownProps) => {
  console.log('mapStateToProps', state, ownProps)
  return {
    msg: state.msg ? state.msg : ownProps.msg
  }
}
const HelloWorld = connect(mapHelloStateToProps)(Hello)

const mapTranslateDispatchToProps = (dispatch, ownProps) => {
  return {
    sendMsg: () => {
      dispatch(actions.sendShowChineseMsg())
      setTimeout(() => dispatch(actions.sendShowEnglishMsg()), 5000)
    }
  }
}
const TranslateButton  = connect(null, mapTranslateDispatchToProps)(Translate)

class App extends React.Component {
  render() {
    return (
      <div>
        <TranslateButton />
        <HelloWorld  msg="Hello World!" />
      </div>
    )
  }
}

const store = createStore(reducer)

ReactDom.render(
  <Provider store = {store}>
    <App />
  </Provider>,
  document.getElementById('example')
);