why redux?

• 隨著 JavaScript 單頁應用開發日趨復雜,管理不斷變化的 state 非常困難
• Redux的出現就是為了解決state里的數據問題
• 在React中，數據在組件中是單向流動的
• 數據從一個方向父組件流向子組件(通過props)，由于這個特征，兩個非父子關系的組件（或者稱作兄弟組件）之間的通信比較麻煩

what is redux?

工作流

設計思想

• Redux是將整個應用狀態存儲到到一個地方，稱為store
• store里面保存一棵狀態樹(state tree)
• 組件可以派發(dispatch)行為(action)給store,而不是直接通知其它組件
• 其它組件可以通過訂閱store中的狀態(state)來刷新自己的視圖.

三大原則

• 整個應用的 state 被儲存在一棵 object tree 中，并且這個 object tree 只存在于唯一一個 store 中 State 是只讀的，惟一改變 state 的方法就是觸發 action，
• action是一個用于描述已發生事件的普通對象 使用純函數來執行修改，為了描述action如何改變state tree ，你需要編寫 reducers
• 單一數據源的設計讓React的組件之間的通信更加方便，同時也便于狀態的統一管理

how redux?

1.安裝

npm i redux -S 復制代碼

2.簡單例子

1.引入

import {createStore} from 'redux'; //createStore 用來創建狀態倉庫 復制代碼

2.創建state

let initState = {title: 'star' } 復制代碼

3.創建reducer

const CHANGETITLE = 'CHANGETITLE'; //action-todos function reducer(state= initState, action){switch(action.type){case CHANGETITLE: return state.title = action.title;}} 復制代碼

4.創建倉庫

let store = createStore(reducer); 復制代碼

5.觸發dispatch中傳入action

store.dispatch({type: CHANGETITLE, title: 'xingxing'}) 復制代碼

完整代碼

import {createStore} from 'redux'; const CHANGETITLE = 'CHANGETITLE'; function reducer(state= initState, action){switch(action.type){case CHANGETITLE: state.title = action.title;}console.log(state); } let store = createStore(reducer); store.subscribe(()=>{ //訂閱事件，在dispatch時觸發console.log('render'); }) store.dispatch({type: CHANGETITLE, title: 'xingxing'}) 復制代碼

復雜些例子

在真實開發中需要開辟一個文件空間來管理倉庫

• 文件結構化
• 多reducer，合并reducer

1.actions

action-type.js

//action-type衡量,通過引入使用，減少拼寫錯誤引發的問題 export const INCREMENT = 'INCREMENT' export const DECREMNET = 'DECREMNET' 復制代碼

actions/count.js

import * as types from "../action-types" //用于生成action let counter = {add(n){return {type: types.INCREMENT, count: n}} } export default counter 復制代碼

2.reducers

reducers/count.js

import {INCREMENT,DECREMENT} from '../actions/action-type' let initState = {count: 0 } function reducer(state = initState,action){switch(action.type){case INCREMENT:state.count = state.count + action.number;break;case DECREMENT:state.count = state.count - action.number;break;}return state } export default reducer 復制代碼

合并reducer

reducers/index.js

import todos from './todo'; import count from './count'; import {combineReducers} from 'redux' let reducers = combineReducers({todos,count }) export default reducers; 復制代碼

store/index.js 初始化倉庫

import {INCEMENT,DECREMENT} from './actions/action-type'; import {createStore} from 'redux'; import reducers from './reducers'export default createStore(reducers); 復制代碼

how is redux work?

• redux的數據源是創建reducer時，傳進去的initState。
• 為了避免state被隨意篡改，redux通過dispatch reducer來更改數據。
• redux可以通過subscribe訂閱狀態修改事件

//簡單實現 function createStore(reducer){let state;let listeners = [];function subscribe(listener){listeners.push(listener);return ()=> listeners = listeners.filter(fn=>fn!==listener);}function dispatch(action){listeners.forEach(listener=>listener());reducer(state, action)}dispatch({})function getState(){return state;}return {subscribe, dispatch, getState} } 復制代碼

合并reducer

function combineReducers(reducers){return (state={},action)=>{let newState = {};for(let key in reducers){let s = reducers[key](state[key],action);newState[key] = s;}return newState;} } 復制代碼

完整代碼

function createStore(reducer){let state;let listeners = [];function subscribe(listener){listeners.push(listener);return ()=>{listeners = listeners.filter(l=> l!==listener)}}dispatch({})function dispatch(action){state = reducer(state,action);listeners.forEach(l=>l());}function getState(){return state;}return {subscribe,dispatch,getState}; }function combineReducers(reducers){return (state={},action)=>{let newState = {};for(let key in reducers){let s = reducers[key](state[key],action); newState[key] = s;}return newState;} }export {createStore,combineReducers} 復制代碼

最近在研究redux，歡迎指出問題。后續更新react-redux全家桶系列研究

總結

以上是生活随笔為你收集整理的再厉害的魔术也比不上真正的redux的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。