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。

注： 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;