Redux 是什么
Redux 是一個 JavaScript 狀態(tài)容器，提供可預測化的狀態(tài)管理
state, store 和 action
- 應用中所有的 state 都以一個對象樹的形式儲存在一個單一的 store 中。 惟一改變 state 的辦法是觸發(fā) action (描述如何處理state的對象)。
- 為了實現(xiàn)根據(jù) action 的信息來改變 state 樹，你需要編寫 reducers秋度。
示意圖:
redux的工作流程
初始化 Redux
- 安裝依賴項
npm install --save redux
// 安裝react 支持
npm install --save react-redux
npm install --save-dev redux-devtools
Redux 中的 action, reducer 和 store
創(chuàng)建一個初始 state
const initialState = {
count: 0
};
action
- 一個具有 type 屬性的哈希對象, 作為 reducer 函數(shù)中switch語句的開關.
- 創(chuàng)建一個action:
// create actions
const ADD_ACTION = "ADD";
const REDUCE_ACTION = "REDUCE";
const add = num => {
return {
type: ADD_ACTION,
num
};
};
const reduce = num => {
return {
type: REDUCE_ACTION,
num
};
};
reducer ( 狀態(tài)處理函數(shù) ) :
-
reducer的作用 :
- 根據(jù) action 對象的type 來更新狀態(tài).
-
reducer的工作方式 :
- 接收一個 state 參數(shù), 作為初始的 state
- 接收一個action對象, 在函數(shù)體中用 switch 語句 判斷 action 的type, 然后定義相應的處理方式( 返回新的 state 對象) .
-
一個 reducer 函數(shù)示例:
在示例中, 我們根據(jù) action.type 屬性來執(zhí)行對應的 switch 語句
-
redux 要求, reducer 每次返回的對象(state)必須是新的對象.
- 所以我們可以在函數(shù)體中創(chuàng)建新對象, 或者是通過
Object.assign({}, ...sources)的方法來實現(xiàn).
- 所以我們可以在函數(shù)體中創(chuàng)建新對象, 或者是通過
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD":
return Object.assign({}, state, {
count: state.count + action.num
});
case "REDUCE":
return Object.assign({}, state, {
count: state.count - action.num
});
default:
return state;
}
};
store 對象: state狀態(tài)管理器
- 創(chuàng)建一個 store 狀態(tài)管理器
- 我們使用 redux 包提供的 createStore() 函數(shù)來創(chuàng)建一個 store 對象.
const reduxStore = createStore(reducer);
store 對象 API
- 操作state
- state 的變化要通過 store對象的
dispatch()方法來實現(xiàn) (傳遞一個 action 對象給 reducer處理.) - 必須要通過 store API 操作 state, react 中的 view 才會更新.
- state 的變化要通過 store對象的
store.dispatch(action)
- 獲取state
store.getState();
redux 工作流程
- 首先聲明 action 對象
- 需要聲明 type 屬性.
- 定義 reducer 函數(shù)
- 創(chuàng)建 store 對象.
let store = createStore(reducer)- 調用 store 對象API
action, Reducer, store 之間的關系
- action 是一個哈希對象.
- reducer 中定義如何根據(jù) action 來操作 state
- store 接收 reducer 作為參數(shù).
- 通過 store 的 api 來接收 action 以調用 reducer
- 對象的創(chuàng)建:
const { createStore } = Redux
let action = {type: 'yyy'}
const reducer = (state, action) => { xxxxx }
const store = createStore(reducer)
示例代碼:
點擊這里運行示例代碼
import React from "react";
import ReactDOM from "react-dom";
import Redux, {createStore} from "redux";
// create actions
const ADD_ACTION = "ADD";
const REDUCE_ACTION = "REDUCE";
const add = num => {
return {
type: ADD_ACTION,
num
};
};
const reduce = num => {
return {
type: REDUCE_ACTION,
num
};
};
// initialize a state
const initialState = {
count: 0
};
// create a reducer
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD":
return Object.assign({}, state, {
count: state.count + action.num
});
case "REDUCE":
return Object.assign({}, state, {
count: state.count - action.num
});
default:
return state;
}
};
function getCurrentState() {
return reduxStore.getState();
}
function addState() {
reduxStore.dispatch(add(1));
console.log(getCurrentState());
}
function reduceState() {
reduxStore.dispatch(reduce(1));
console.log(getCurrentState());
}
const reduxStore = createStore(reducer);
console.log(reduxStore.getState());
class App extends React.Component {
constructor(props) {
super(props);
//初始化 state
this.state = getCurrentState();
}
render() {
return (
<div>
<h1>A Redux Example, open console to check results.</h1>
<button onClick={addState}>add</button>
<button onClick={reduceState}>reduce</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);
