redux在react中的使用方法（入門級）

在控制台中列印redux

const redux =

require
('redux'
)console.
log(redux.
createstore((
)=>))
// 至少傳入乙個函式 -- reducer --- 純函式
// dispatch: 觸發修改狀態的方式
// subscribe: 訂閱 -- 資料改變，要以何種方式 更新檢視
// getstate: 獲取狀態

import

from
'redux'
/** * 如果需要獲取狀態 store.getstate()
* 如果需要訂閱 更新檢視 store.subscribe(fn) fn是關鍵 （狀態/屬性的改變會引起檢視的二次渲染 --- 入口檔案）
* 如果需要觸發更改狀體啊 store.dispatch()
*/

const defaultstate =

const
reducer
=(state = defaultstate, action)
=>
case
'decrement'
:return object.
assign
(, state,
)default
:return state
}}export
default reducer

import

from
'redux'
import reducer from
'./reducer'
const store =
createstore
(reducer)
export
default store

import react from

'react'
import reactdom from
'react-dom'
import store from
'./redux/store'
function
render()
render()
// 如果狀態一旦發生改變，就重新執行 render 函式（自定義函式）
store.
subscribe
(render)

import react,

from
'react'
import store from
'./store'
export
default
class
extends
component)}
}>
-<
/button>
}>
+<
/button>
<
/div>)}
}

以todolist為例

1.入口檔案

import react from

'react'
import reactdom from
'react-dom'
'./todolist/todolist'
import
from
'react-redux'
// 頂級元件中使用
import store from
'./todolist/store' 
reactdom.
render
(>
>
<
/provider>
, document.
getelementbyid
('root'
))

const defaultstate =

const
reducer
=(state = defaultstate, action)
=>
case
'remove_item'
:const arr = state.list.
filter
((item, index)
=>
)return
default
:return state
}}export
default reducer

import

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

import react,

from
'react'
import
from
'react-redux'
class
form
extends
component
handlerchange
=(e)
=>)}
handlerkeyup
=(e)
=>
}render()
onchange =
onkeyup =
/>)}
}const
mapdispatchtoprops
= dispatch =>)}
}}// 如果不需要獲取狀態，第乙個引數寫為null
export
default
connect
(null
, mapdispatchtoprops)
(form)

import react,

from
'react'
import
from
'react-redux'
class
list
extends
component
}// removedata = () => 
render()
>
>刪除<
/button>
}>刪除 */
}<
/li>))
}<
/ul>)}
}const
mapstatetoprops
= state =>
}const
mapdispatchtoprops
= dispatch =>)}
}}export
default
connect
(mapstatetoprops, mapdispatchtoprops)
(list)

觀測 redux 原始碼，得知，自動呼叫一次dispatch

// when a store is created, an "init" action is dispatched so that every

// reducer returns their initial state. this effectively populates
// the initial state tree.
dispatch
()

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...

react 中的redux的使用

在專案中安裝redux yarn add redux yarn add react redux 首先建立乙個store資料夾 在store資料夾中建立乙個index.js檔案 在index.js中建立乙個例項 import from redux const state createstore exp...

react中簡單使用redux

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