react redux入門案例

5、讀取共享資料

1、建立actions

export
default
function
addaction()
}

也可以直接寫成乙個物件，但是寫成函式的形式更加靈活，比如

export
default
function
todos
(text)
}

2、建立reducer

let initstate = 
export default function reducer(state = initstate, action) 
default:
return state;
}}

reducer函式是對共享資料處理的主要函式，包含兩個引數，

state：需要元件之間共享的變數，最好設定初始值，如果沒有初始值，可能會出現undefined錯誤

action：需要對資料進行的某種操作，action中包含的type欄位用於區分是那種操作，當然欄位也可自己定義。

3、建立store並使用

建立

export default createstore(reducer)

使用

return (

);}

將需要內部資料共享的元件使用provider標籤包括，並傳入store屬性

4、修改共享資料

需要共性資料的變數需要使用connect()函式處理

const mapdispatchtoprops = dispatch => 
}}export default connect(null, mapdispatchtoprops)(button)

mapdispatchtoprops()函式返回的是乙個物件，這個物件中存放的是對state進行操作的函式，這些函式最後都會對映到button元件中的props屬性中，元件中直接使用this.props.asdd()函式對共享資料進行操作。

元件內部的使用

class button extends component 
}// 好像必須寫成箭頭函式，否則出現呼叫this.props說undefined
handleclick = () => 
render() 
}

好像必須寫成箭頭函式，否則出現呼叫this.props說undefined

5、讀取共享資料

class  home extends component 
render() 
}const mapstatetoprops = state => 
}export default connect(mapstatetoprops)(home)

使用connect函式對已有元件進行封裝，可以讀取state中的共享變數（store中的state），mapstatetoprops()函式返回時值是乙個物件，這個物件會將直接結構後放在props屬性中，所以直接使用this.props就可以獲取