資訊專欄INFORMATION COLUMN
Redux簡(jiǎn)單的一個(gè)小實(shí)例
import React from "react";
import { createStore } from "redux";
const initState = [
{
id: 1,
text: "test1"
}
];
const reducer = function(state = initState, action) {
switch(action.type) {
case "ADD_TODO":
return [
...state,
action.payload
]
default:
return state;
}
}
const store = createStore(reducer);
class Index extends React.Component {
constructor() {
super();
this.state = {
todos: [],
val: ""
}
}
temp = null;
componentDidMount() {
this.setState({
todos: store.getState()
});
this.temp = store.subscribe(() => {
this.setState({
todos: store.getState()
});
});
}
componentWillUnmount() {
this.temp();
}
handleChangeVal = (e) => {
this.setState({
val: e.target.value
});
}
handleEnter = (e) => {
if(e.keyCode === 13) {
const val = e.target.value;
const action = {
type: "ADD_TODO",
payload: {
id: val,
text: val
}
};
store.dispatch(action);
}
}
render() {
const { val } = this.state;
return (
Redux的使用實(shí)例
{
this.state.todos.map((item, index) => {
return (
- {item.text}
)
})
}
)
}
}
export default Index;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106723.html
摘要：通過(guò)創(chuàng)建將所有的異步操作邏輯收集在一個(gè)地方集中處理，可以用來(lái)代替中間件。 redux-saga框架使用詳解及Demo教程 前面我們講解過(guò)redux框架和dva框架的基本使用，因?yàn)閐va框架中effects模塊設(shè)計(jì)到了redux-saga中的知識(shí)點(diǎn)，可能有的同學(xué)們會(huì)用dva框架，但是對(duì)redux-saga又不是很熟悉，今天我們就來(lái)簡(jiǎn)單的講解下saga框架的主要API和如何配合redux框...
摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫(kù)。具有高效且靈活的特性。在的中，可以使用或者等來(lái)監(jiān)聽(tīng)某個(gè)，當(dāng)某個(gè)觸發(fā)后，可以使用發(fā)起異步操作，操作完成后使用函數(shù)觸發(fā)，同步更新，從而完成整個(gè)的更新。 不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫(kù)。 具有高效且靈活的特性。 React Redux 將組件區(qū)分為 容器組件 和 UI 組件 前者會(huì)處理邏輯...
摘要：相關(guān)狀態(tài)父組件傳遞給子組件的狀態(tài)。外部狀態(tài)狀態(tài)是可以從視圖庫(kù)中移出來(lái)的，然后可以使用提供者消費(fèi)者模式把狀態(tài)重新連接回視圖庫(kù)。重新設(shè)計(jì)在我看來(lái)，重寫(xiě)是有其必要性的，至少有以下個(gè)方面可以改進(jìn)得更友好。 Redux 學(xué)習(xí)起來(lái)很困難？寫(xiě)起代碼來(lái)很啰嗦？一起來(lái)看看 Rematch 的作者對(duì) Redux 的思考和簡(jiǎn)化吧~ 原文：《Redesigning Redux》, Shawn McKay 都過(guò)...
摘要：官方推薦使用的情況是當(dāng)需要用到全局?jǐn)?shù)據(jù)的時(shí)候，比如主題，多語(yǔ)言制或者用戶登錄授權(quán)等等。 老鐵，學(xué)不動(dòng)了？不要慌，耽誤不了你幾分鐘...(說(shuō)謊臉，汗) long long ago 使用react的同胞們，也許都苦惱過(guò)其狀態(tài)管理以及組件之間的數(shù)據(jù)傳遞和共享（笨重的方式通過(guò)props依次往子組件傳遞）。 這時(shí)候，redux（mobx類似）出現(xiàn)了，我們累死累活的從水深火熱中解放了（第三方的庫(kù)相...
閱讀 1915·2021-09-22 15:25
閱讀 1383·2019-08-29 12:34
閱讀 2025·2019-08-26 13:57
閱讀 3283·2019-08-26 10:48
閱讀 1520·2019-08-26 10:45
閱讀 885·2019-08-23 18:23
閱讀 815·2019-08-23 18:01
閱讀 2025·2019-08-23 16:07
