React 中的 react-redux 插件

什么是 react-redux ？

react-redux是用来配合Redux的插件。它使我们的工作得到了简化。但在实际的项目中，需要权衡一下是否使用react-redux。

安装

cnpm i react-redux -S

初始化Redux

Redux的基础配置

配置根元素

在根文件 index.js 中，引入 Provider ，用它包裹根组件，并传入 store

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 引入生产者 Provider
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
    // 用 Provider 包裹根组件App，并传入 store 以供所有组件使用
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementByID("root")
);

组件中使用公共状态 state

• 引入 connect 高阶组件

• 在导出组件时用 connect 对组件进行加工

  connect 高阶组件做了柯里化处理，即函数嵌套函数。第一个函数的参数为自己定义的 mapStateToProps 和 mapDispatchToProps ，第二个函数的参数为被加工的组件名

• 定义 mapStateToProps 函数

  mapStateToProps 可以将 state 映射到组件的参数 props 身上。（映射即为双向响应，有了它我们可以省略订阅更新视图函数的步骤）

• 通过 this.props 取值

import React,{ Component } form 'react'
// 引入 connect 高阶组件
import { connect } from 'react-redux'

class App extends Component{
    render(){
        return (
            <div>
                {/* 在this.props身上获取公共状态state中的数据 */}
                <h2>{this.props.n}</h2>
            </div>
        )
    }
}

// 定义映射数据的函数，返回一个对象
const mapStateToProps = (state)=>({
    // 在此定义的值会从公共状态 state 映射到 this.props 身上
    n:state.n
})

//用 connect 对组件进行加工
export default connect(mapStateToProps)(App)

组件中修改 state

• 在 connect 高阶组件调用时，传入函数 mapDispatchToProps (将dispatch映射到props上)

  函数 mapDispatchToProps 可以获取 dispatch 方法，并将函数内写入的方法映射到 this.props 当中。

• 在 mapDispatchToProps 中，写入修改公共状态的事件函数

  mapDispatchToProps 中的参数即为 dispatch ，可直接用它来派发 action ，而不用引入 store 。将组件中的方法都写到 mapDispatchToProps 中，还会帮我们实现 UI层和逻辑层的分离。

• 绑定事件

  由于事件函数经过 mapDispatchToProps 处理，所以用 this.props.事件名 来调用

• 不用再进行试图更新的订阅！！！ mapStateToProps 已经帮我们做了映射！

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

class App extends Component{
    render(){
        return (
            <div>
                <h2>{this.props.n}</h2>
                <button onClick={this.props.handleAdd.bind(this)}>点击增加</button>
            </div>
        )
    }
}



const mapStateToProps = (state)=>({
    n:state.n
})

const mapDispatchToProps = (dispatch)=>({
    handleAdd(){
        let action = {
            type:"NUM_ADD"
        }
        dispatch(action);
    }
})

// 在connect中传入函数 `mapDispatchToProps` 
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

接下来按照Redux的正常流行走即可。

神奇的事情发生了

1. 解决了频繁引入 store 的问题，一次引入，全体使用

2. 解决了UI层与逻辑层混在一起的问题，自动将组件分离成了一个 UI组件 和一个 容器组件

   将组件拆分成两个的结构：外面是一个容器组件，里面包了一个UI 组件。容器组件负责与外部的通信，将数据传给UI组件，UI组件则负责渲染出视图。

3. 解决了每次都要进行视图更新的订阅问题，mapStateToProps 自动帮我们做了映射