P20:Redux进阶-React-redux中的Provider和connect
上篇文章我们已经完成了React-redux
开发TodoList
组件的基本环境。现在就可以开始学习React-redux
了,本文主要学习一下Provider
和connect
这两个知识点。
<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
组件。
码云笔记 » P20:Redux进阶-React-redux中的Provider和connect