redux的使用流程

redux

react只是dom的乙個抽象層

web應用是乙個狀態機，檢視與狀態是一一對應的

所有的狀態，儲存在乙個物件裡面（唯一資料來源）

從元件層面考慮，什麼樣子的需要redux：

redux有四個組成部分

store：用來儲存資料

reducer：真正的來管理資料

actioncreators：建立action，交由reducer處理

view：用來使用資料

redux的流程

1）store通過reducer建立了初始狀態

2）view通過store.getstate()獲取到了store中儲存的state掛載在了自己的狀態上

3）使用者產生了操作，呼叫了actions 的方法

4）actions的方法被呼叫，建立了帶有標示性資訊的action

5）actions內部通過呼叫store.dispatch方法將標誌性的action傳送到了reducer中

6）reducer接收到action並根據標識資訊判斷之後返回了新的state

7）store的state被reducer更改為新state的時候，store.subscribe方法裡的**函式會執行，此時就可以通知view去重新獲取state

例如建立如下案例

在文字框輸入文字後，按下回車鍵，新增到列表中

store通過reducer建立了初始狀態，在reducer中定義乙個陣列

store/index.js

import  from 'redux';

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

store/reducer.js

let state = ,

]}const reducer = (prevstate = state, action) => 
return newstate
}

view通過store.getstate()獲取到了store中儲存的state掛載在了自己的狀態上在todocontent元件中展示資料

import react,  from 'react'

import store from '../store'
import todoinput from './todoinput'
export default class redux extends component 
}setlist = () => )
}componentdidmount() )
}handlecheck = (id) => 
remove = (id) => 
render()  = this.state
return (
刪除})})
}}

當input框輸入文字時，按下鍵盤下的enter，列表會增加一條也就是當使用者產生了操作，呼叫了actions 的方法元件todoinput

import actioncreators from "../../store/actioncreators"

export default class todoinput extends component 
}render() 
}

actions的方法被呼叫，建立了帶有標示性資訊的actionactions內部通過呼叫store.dispatch方法將標誌性的action傳送到了reducer中actioncreators.js

const actioncreators = 

//需要將action物件派發給reducer
store.dispatch(action)
},changelist(id) 
store.dispatch(action)
},removelist(id) 
store.dispatch(action)
},}export default actions

reducer接收到action並根據標識資訊判斷之後返回了新的state，store.subscribe方法裡的**函式會執行，此時就可以通知view去重新獲取statereducer.js

let state = ,

]}const reducer = (prevstate = state, action) => 
switch (action.type) )
break;
case "changelist":
newstate.list = handlelist.changelist(newstate.list, action.id)
break;
case "removelist":
newstate.list = handlelist.removelist(newstate.list, action.id)
break;
default:
break;
}return newstate
}const handlelist = )[0].id + 1
},changelist(list, id) 
}return list
},removelist(list, id) 
return true})}
}export default reducer

redux（一）初步讀懂配置redux流程

建立state.js let state export default state 定義action型別名常量count.js export const add action add action export const remove action remove action export con...

redux工作流程

首先，使用者發出 action。store.dispatch action 然後，store 自動呼叫 reducer，並且傳入兩個引數 當前 state 和收到的 action。reducer 會返回新的 state state 一旦有變化，store 就會呼叫監聽函式。設定監聽函式 store....

redux的簡單使用

redux是乙個狀態管理工具，一般在多互動，多資料來源的時候使用redux編寫程式的時候方便很多，結構也更加清晰。以下是廣為流傳的redux工作流程圖 以上的流程我個人理解是 是乙個修改store資料的乙個流程圖，首先元件中的某個操作需要修改store的資料，然後就要通知store，元件就先將要修改...