P20:Redux进阶-React-redux中的Provider和connect

上篇文章我们已经完成了React-redux开发TodoList组件的基本环境。现在就可以开始学习React-redux了,本文主要学习一下Providerconnect这两个知识点。

<Provider>提供器讲解

<Provider>是一个提供器,只要使用了这个组件,组件里边的其它所有组件都可以使用store了,这也是React-redux的核心组件了。有了<Provider>就可以把/src/index.js改写成下面的代码样式。

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
//---------关键代码--------start
import { Provider } from 'react-redux'
import store from './store'
//声明一个App组件,然后这个组件用Provider进行包裹。
const App = (
    <Provider store={store}>
        <TodoList />
    </Provider>
)
//---------关键代码--------end
ReactDOM.render(App, document.getElementById('root'));

写完这个,我们再去浏览器中进行查看,发现代码也是可以完美运行的。需要注意的是,现在还是用传统方法获取的store中的数据。有了Provider再获取数据就没有那么麻烦了。

connect连接器的使用

现在如何简单的获取store中数据那?先打开TodoList.js文件,引入connect,它是一个连接器(其实它就是一个方法),有了这个连接器就可以很容易的获得数据了。

import {connect} from 'react-redux'  //引入连接器

这时候暴露出去的就变成了connect了,代码如下。

export default connect(xxx,null)(TodoList);

这里的xxx代表一个映射关系,目前还没有制作这个映射关系。

映射关系的制作

映射关系就是把原来的state映射成组件中的props属性,比如我们想映射inputValue就可以写成如下代码。

const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue
    }
}

这时候再把xxx改为stateToProps

export default connect(stateToProps,null)(TodoList)

然后把<input>里的state标签,改为props,代码如下:

<input value={this.props.inputValue} />

为了方便你学习,我这里给出所有的TodoList.js的所有代码。

import React, { Component } from 'react';
import store from './store'
import {connect} from 'react-redux'

class TodoList extends Component {
    constructor(props){
        super(props)
        this.state = store.getState()
    }
    render() { 
        return (
            <div>
                <div>
                    <input value={this.props.inputValue} />
                    <button>提交</button>
                </div>
                <ul>
                    <li>mybj</li>
                </ul>
            </div>
            );
    }
}

const stateToProps = (state)=>{
    return {
        inputValue : state.inputValue
    }
}

export default connect(stateToProps,null)(TodoList);

写完之后再到浏览器中查看一下,发现我们映射的关系也是可以用的。

以上就是React-Redux插件的使用重点,你需要多写几遍,把这个流程记在心里。先到这里,下篇文章我们继续实现TodoList组件。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P20:Redux进阶-React-redux中的Provider和connect

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发