資訊專欄INFORMATION COLUMN
Redux簡單的一個小實例
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的使用實例
{
this.state.todos.map((item, index) => {
return (
- {item.text}
)
})
}
)
}
}
export default Index;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106723.html
摘要：通過創建將所有的異步操作邏輯收集在一個地方集中處理，可以用來代替中間件。 redux-saga框架使用詳解及Demo教程 前面我們講解過redux框架和dva框架的基本使用，因為dva框架中effects模塊設計到了redux-saga中的知識點，可能有的同學們會用dva框架，但是對redux-saga又不是很熟悉，今天我們就來簡單的講解下saga框架的主要API和如何配合redux框...
摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監聽某個，當某個觸發后，可以使用發起異步操作，操作完成后使用函數觸發，同步更新，從而完成整個的更新。 不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。 具有高效且靈活的特性。 React Redux 將組件區分為 容器組件 和 UI 組件 前者會處理邏輯...
摘要：相關狀態父組件傳遞給子組件的狀態。外部狀態狀態是可以從視圖庫中移出來的，然后可以使用提供者消費者模式把狀態重新連接回視圖庫。重新設計在我看來，重寫是有其必要性的，至少有以下個方面可以改進得更友好。 Redux 學習起來很困難？寫起代碼來很啰嗦？一起來看看 Rematch 的作者對 Redux 的思考和簡化吧~ 原文：《Redesigning Redux》, Shawn McKay 都過...
摘要：官方推薦使用的情況是當需要用到全局數據的時候，比如主題，多語言制或者用戶登錄授權等等。 老鐵，學不動了？不要慌，耽誤不了你幾分鐘...(說謊臉，汗) long long ago 使用react的同胞們，也許都苦惱過其狀態管理以及組件之間的數據傳遞和共享（笨重的方式通過props依次往子組件傳遞）。 這時候，redux（mobx類似）出現了，我們累死累活的從水深火熱中解放了（第三方的庫相...
閱讀 1752·2021-09-22 15:25
閱讀 1311·2019-08-29 12:34
閱讀 1915·2019-08-26 13:57
閱讀 3195·2019-08-26 10:48
閱讀 1451·2019-08-26 10:45
閱讀 798·2019-08-23 18:23
閱讀 740·2019-08-23 18:01
閱讀 1951·2019-08-23 16:07
