Redux 是什么
Redux 是一个 JavaScript 状态容器,提供可预测化的状态管理
state, store 和 action
- 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action (描述如何处理state的对象)。
- 为了实现根据 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
创建一个初始 state
const initialState = {
count: 0
};
action
- 一个具有 type 属性的哈希对象, 作为 reducer 函数中switch语句的开关.
- 创建一个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 ( 状态处理函数 ) :
-
reducer的作用 :
- 根据 action 对象的type 来更新状态.
-
reducer的工作方式 :
- 接收一个 state 参数, 作为初始的 state
- 接收一个action对象, 在函数体中用 switch 语句 判断 action 的type, 然后定义相应的处理方式( 返回新的 state 对象) .
-
一个 reducer 函数示例:
-
在示例中, 我们根据 action.type 属性来执行对应的 switch 语句
-
redux 要求, reducer 每次返回的对象(state)必须是新的对象.
- 所以我们可以在函数体中创建新对象, 或者是通过
Object.assign({}, ...sources)
的方法来实现.
- 所以我们可以在函数体中创建新对象, 或者是通过
-
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状态管理器
- 创建一个 store 状态管理器
- 我们使用 redux 包提供的 createStore() 函数来创建一个 store 对象.
const reduxStore = createStore(reducer);
store 对象 API
- 操作state
- state 的变化要通过 store对象的
dispatch()
方法来实现 (传递一个 action 对象给 reducer处理.) - 必须要通过 store API 操作 state, react 中的 view 才会更新.
- state 的变化要通过 store对象的
store.dispatch(action)
- 获取state
store.getState();
redux 工作流程
- 首先声明 action 对象
- 需要声明 type 属性.
- 定义 reducer 函数
- 创建 store 对象.
let store = createStore(reducer)
- 调用 store 对象API
action, Reducer, store 之间的关系
- action 是一个哈希对象.
- reducer 中定义如何根据 action 来操作 state
- store 接收 reducer 作为参数.
- 通过 store 的 api 来接收 action 以调用 reducer
- 对象的创建:
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);
网友评论