react的redux无状态组件
Provider功能主要为以下两点：
- 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
- 接收Redux的store作为props，通过context对象传递给子孙组件上的connect
首先，对原组件进行了封装： render方法中, 渲染了其子级元素, 使整个应用成为Provider的子组件。
（1）this.props children用于获取当前组件的所有子组件
（2）Children为react内部定义的顶级对象, 该对象封装了一些方便操作字组件的方法. Children.only用于获取仅有的一个子组件,没有或者超过一个均会报错. 所以注意: 确保Provider组件的直接子级为单个封闭元素，切勿多个组件平行放置
其次，传递store
（1）constructor方法: Provider初始化时, 获取到props中的store对象;
（2） getChildContext方法: 将外部的store对象放入context对象中，使子孙组件上的connect可以直接访问到context对象中的store。
（1）constructor方法: Provider初始化时, 获取到props中的store对象;
（2） getChildContext方法: 将外部的store对象放入context对象中，使子孙组件上的connect可以直接访问到context对象中的store。
注： context可以使子孙组件直接获取父级组件中的数据或方法，而无需一层一层通过props向下传递。context对象相当于一个独立的空间，父组件通过getChildContext()向该空间内写值；定义了contextTypes验证的子孙组件可以通过this.context.xxx，从context对象中读取xxx字段的值。
推荐两个博客：https://segmentfault.com/a/1190000010158572
https://www.jianshu.com/p/815ec73b1354
知识不够，案例来撑：留个github小案例前往
例如react项目的index.js文件
import React from 'react';//引入react库
import ReactDOM from 'react-dom';//引入react-dom插件
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {Provider} from 'react-redux' //连接react和redux引入Provider
import store from './store'
ReactDOM.render(
(
<Provider store={store}>//用<Provider>包裹App组件，并且传递一个store
<App/>
</Provider>
),
document.getElementById('root')
);
registerServiceWorker();
App.js
import React from 'react';
import './App.css';
import { connect } from 'react-redux'//react关联redux的插件
import { inputChangeAction, addAction, deleteAction } from './store/actionCreator'
// 无状态组件。
// 无状态组件在组件的实现中，只有render函数时，建议使用。
// 提升性能。
const App = (props)=>{
let {value, data} = props;
return (
<div className="App">
<div className="handle">
<p>{value}</p>
<input type="text" value={value} onChange={props.handleInputChange}/>
<button onClick={props.handleAddAction}>新增</button>
</div>
<ul className="list">
{
data.map((item, index)=>{
return (
<li key={item.id}>
{item.val}
<span onClick={props.handleDeleteAction(index)}>X</span>
</li>
)
})
}
</ul>
</div>
);
}
//将store中的state值转为组件的props使用
const mapStateToProps = (state)=>{
return {
//key为组件的props的名字
// value值，为state中的值
value: state.list.value,
data: state.list.data
}
}
//将store中的dispatch转为组件的props使用
const mapDispatchToProps = (dispatch)=>{
return {
//key为组件的props的名字
// value值为事件，内部可以操作dispatch
handleInputChange(ev){
// console.log('触发了');
let action = inputChangeAction(ev.target.value);
dispatch(action);
},
handleAddAction(){
let action = addAction();
dispatch(action);
},
handleDeleteAction(index){
return function(){
let action = deleteAction(index);
dispatch(action);
}}}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
store文件的index.js
import { createStore, combineReducers } from 'redux'//引入App.js 输出的函数
import listReducer from './listReducer' //引入默认的state
const reuder = combineReducers({
list: listReducer
})
const store = createStore(reuder);
export default store;
