React使用Redux管理資料

}redux 提供createstore這個函式，用來生成 store。

createstore函式接受另乙個函式作為引數，返回新生成的 store 物件。

// 中介軟體，用於非同步action

import thunk from 'redux-thunk'

// 引入reducer

import reducers from './reducers.js'

// 建立store例項

let store = createstore(

reducers,

)export default store

action 是乙個物件。其中的type屬性是必須的，表示 action 的名稱。其他屬性可以自由設定。

store.dispatch()是 view 發出 action 的唯一方法。

import amplify,  from 'aws-amplify';

//同步action
export const amplifyconfig = ;
amplify.configure(amplifyconfig);
export function setareaindex (data) 
}//非同步action
export function loadtoken(username,password) )
// 非同步分發原味 action
auth.signin(username, password).then(
response => = 
token = 
dispatch()}
).catch(error => )
})}}

reducer 是乙個函式，它接受 action 和當前 state 作為引數，返回乙個新的 state。

import  from 'redux'

// 預設值
import defaultstate from './state.js'
// 乙個reducer就是乙個函式
function areaindex (state = defaultstate.areaindex, action) 
}function token (state = defaultstate.token, action) 
}// 匯出所有reducer
export default combinereducers()

import  from 'react-redux'

import from './store/actions.js'
class loginpage extends component 
loginabroad = () => = this.props
settoken(this.state.username,this.state.password)
}......
}//將state對映到元件的props中
const mapstatetoprops = (state) => 
}//將dispatch對映到元件的props中
const mapdispatchtoprops = (dispatch, ownprops) => ,
setareaindex: (data) => 
}}//react-redux 提供connect方法，用於從 ui 元件生成容器元件。connect的意思，就是將這兩種元件連起來。
export default connect(mapstatetoprops, mapdispatchtoprops)(loginpage)

React 狀態管理之Redux

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

react中簡單使用redux

如果你一點不熟悉redux，看看這個 專案搭建好之後，安裝一下依賴，安裝一下redux 和 react redux 在src目錄下建乙個redux資料夾，在redux資料夾下建action資料夾和reducer資料夾，分別放我們的action和reducer 1，首先編寫我們的action。acti...

react中redux的使用

1.安裝redux npm install redux 2.store的建立 src store index.js import from redux import reducer from reducer const store createstore reducer src store redu...