Redux管理狀態 todoList實現

redux就是react的狀態管理工具

cnpm install -s redux

我們在src下建乙個store檔案，裡面有index，和reducer

下面我們建立store

//

資料（可以是ajax請求的）
const defaultstaet =
//匯出
export default (state = defaultstaet, action) =>

import  from 'redux';

import reducer from './reducer';
export 
default createstore(reducer)

list元件

import react,  from 'react'

//子元件input
import input from './input';
//store
import store from './store/index';
export 
default
class list extends component )
}//inputvalue的值
myinputvalue(e) 
//每輸入傳給store
store.dispatch(action)
}//點選button按鈕
mybuttonclick() 
//把值傳給store
store.dispatch(action)
}//繫結鍵盤事件
mykeydown(e) 
}//checkbox點選事件
mycheckedchange(i, e) 
//把更改以後的陣列傳給store
store.dispatch(action)
} else
//把更改以後的陣列傳給store
store.dispatch(action)}}
//刪除按鈕（未完成的）
mybuttondeletew(i) 
//把切割以後的數傳給store
store.dispatch(action)
}//刪除按鈕（已完成的）
mybuttondeletey(i) 
//把切割以後的數傳給store
store.dispatch(action)
}//myitemupdate(e) 
//數去焦點
myitemblur(i, e) )
const action =
//改為不可編輯狀態
e.target.contenteditable = false
//把修改後新的陣列傳給store
store.dispatch(action)
}render() 
this.mykeydown.bind(this)} mybuttonclick= value= myinputvalue= />
) }
}

import react,  from 'react'export 

default
class input extends component 
this.props.value} onkeydown= onchange= />
this.props.mybuttonclick}>新增
) }
}

//

資料（可以是ajax請求的）
const defaultstaet =
//匯出
export default (state = defaultstaet, action) =>
//點選button提交的內容
if (action.type === 'button-value') )
return
newstate
}//點選checked，
if (action.type === 'checked-listw') 
//點選checked
if (action.type === 'checked-listy') 
//點選刪除
if (action.type === 'listw-delete') 
//點選刪除
if (action.type === 'listy-delete') 
//點選更新內容
if (action.type === 'item-update') 
return
state
}

Redux狀態管理

1 三大原則 單一資料來源 state是唯讀的 redux中state的更改，其實是建立了乙個全新的state 使用純函式來執行修改 1 將整個應用的state儲存在唯一的store物件中 2 state只能通過觸發action來修改，其中action就是乙個描述性的普通物件 3 使用reducer...

React 狀態管理之Redux

flux vuex vue react redux react state 狀態收集 更新內部state狀態，更新component 1.建立預設狀態 一般const or let乙個物件 const defaultstate 2.建立 reducer 純函式 函式必須有返回值 let reduce...

redux 集中式狀態管理 狀態的呼叫

import from redux import from react redux function reducer1 state action 建立store const store createstore reducer1 redux不是只配react 不是獨有 react redux用來支援r...