redux基础教程（二）-react-redux的应用

react-redux简介

React 和 Redux 其实是两个独立的框架，都可以单独的使用。但在react中使用redux的话，就没有理由不使用 react-redux了，因为它可以大大的简化redux的代码书写。

react-redux核心

react-redux有两个最主要的核心功能

• connect : 用来链接容器组件和UI组件
• Provider: 提供包含 store的context

connect()

connect方法，用于从UI组件生产容器组件，将两个组件连接起来。

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Home extends Component {
    render() {
        return (
        	...
        )
    }
}
            
export default connect(null,null)(Home);

connect方法有两个参数：mapStateToProps 和mapDispatchToProps。通过这两个单词我们也可以了解到前者是将state映射到UI的props,后者是将UI组件中的一些操作传递给action

mapStateToProps()

mapStateToProps是一个函数，是connect的第一个参数，它接收一个参数state,返回一个对象，返回的对象实际就是我们需要获取到的值。

//UI组件代码
// 使用时直接{ this.props.input_value }就可以了。
...
const mapStateToProps = (state) => {
    return {
        input_value: state.default_value
    }
}
            
export default connect(mapStateToProps,null)(Home);

mapDispatchToProps()

mapDispatchToProps可以是函数也可以是对象，如果是函数就会有dispatch和ownProps两个参数，并且return一个对象。

//UI组件代码
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Home extends Component {
    
    handleClick = () => {
       this.props.change();
    }
    render() {
        return (
        	<div>
            	<button onClick={this.handleClick}>点我</button>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    change: () => {
      dispatch({
        type: "VALUE_CHANGE",
        value: ownProps.input_value
      });
    }
  }
}         
export default connect(mapStateToProps,null)(Home);

Provider 组件

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。

一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

另外一种就是利用 React-Redux提供的Provider组件，在最外层包一层Provider组件，这样一来，App的所有子组件就默认都可以拿到state了。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import registerServiceWorker from './registerServiceWorker';
import store from './store'
import { Provider } from 'react-redux';

const Main = (
    <Provider store={store}>
        <App />
    </Provider>
)

ReactDOM.render(Main, document.getElementById('root'));
registerServiceWorker();

React-Redux虽然看着有些麻烦，但方便了我们的操作，只要多写几遍这个流程，明白了其中的原理，就能很愉快的使用它了。

参考：阮一峰的网络日志