【js】Redux基本原理和使用

朝花夕拾*_*發表於2018-12-11
JSRedux

Redux不是說任何的應用都要用到它，如果遇到了react解決不了得問題，可以考慮使用它。

例如：

使用者的使用方式複雜
不同身份的使用者有不同的使用方式（比如普通使用者和管理員）
多個使用者之間可以協作
與伺服器大量互動，或者使用了WebSocket
View要從多個來源獲取資料

Redux的設計思想：

（1）Web 應用是一個狀態機，檢視與狀態是一一對應的。
（2）所有的狀態，儲存在一個物件裡面。

Redux的基本概念和api：

1. Store 儲存資料的地方。整個應用只能有一個store。 函式createStore來生成store。

2. state store包含資料的集合。store.getState() 來得到當前時刻的state. Redux規定一個state對應一個view。state相同則view相同。

3.Action view與state不能直接互動，view發出通知給Action 表示state將要變化。 其中type屬性是必然的。

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

4.Reducer：state收到action之後會生成一個新的state，這個計算過程叫做reducer..Reducer是一個函式，他接受action和當前的state來作為引數，返回一個新的state

 

Redux工作流程：

1. 首先使用者發出action。 store.dispatch(action);

2.然後，Store 自動呼叫 Reducer，並且傳入兩個引數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。 let nextState = todoApp(previousState, action);

3.State 一旦有變化，Store 就會呼叫監聽函式。
// 設定監聽函式
store.subscribe(listener);
listener可以通過store.getState()得到當前狀態。如果使用的是 React，這時可以觸發重新渲染 View。

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

計數器的例項：

const Counter = ({value}) =>(
  <h1>{value}</h1>
  <Button onClick={onIncrement}>+</Button>
  <Button onClick={onDecrement}>-</Button>
 );


const reducer = (state=0, action) => {
  switch(action.type) {
    case `INCERMENT`: return state+1;
    case `DECREMENT`: return state-1;
    default: return state;
  }
}


//傳入reducer則store.dispatch會自動觸發Reducer的自動執行
const sotre = createStore(reducer);


const render = () => {
  ReactDom.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({type:`INCREMENT`})}
      onDecrement={() => store.dispatch({type:`DECREMENT`})}
    />,
  document.getElementById(`root`)
  );
}


render();
//state狀態發生變化時 會自動呼叫render
store.subscribe(render);

 

 

———————
作者：lixuce1234
來源：CSDN
原文：https://blog.csdn.net/lixuce1234/article/details/74295691

相關文章