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

1、为了模拟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>
    )
  }
}

2、利用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)

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

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

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

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

修改完毕后运行即可！
5、以下是完整代码，之后要对代码组织结构做一个调整

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')
);