Redux进阶

https://blog.csdn.net/weiguang102/article/details/121955438

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