定义一个仓库并且使用：
const createStore = (state, changeState)=>{
return {
// 返回的对象就可以称为一个仓库
}
}
// 使用之
let store = createStore(); // 创建一个仓库
获取并且初始化状态：
const createStore = (state, changeState)=>{
const getState = () => state
return {
// 返回的对象就可以称为一个仓库
dispatch, // 派发一个动作
getState, // 获取状态
subscribe // 订阅
}
}
// 初始化状态 老的状态
let countState = {
count:0 }
// 使用之
let store = createStore(countState ); // 创建一个仓库
更新状态：
const createStore = (state, changeState)=>{
const getState = () => state
return {
// 返回的对象就可以称为一个仓库
dispatch, // 派发一个动作
getState, // 获取状态
subscribe // 订阅
}
}
// 初始化状态 老的状态
let countState = {
count:0 }
// 更新状态 所谓改变状态，并不想修改老状态，目标是返回一个新状态
function changeState(state, action){
}
// 使用之
let store = createStore(countState ,changeState); // 创建一个仓库
订阅render：
const createStore = (state, changeState)=>{
const getState = () => state
// 订阅
let listeners = [];
const subscribe = (listener) => listeners.push(listener)
return {
// 返回的对象就可以称为一个仓库
dispatch, // 派发一个动作
getState, // 获取状态
subscribe // 订阅
}
}
// 初始化状态 老的状态
let countState = {
count:0 }
// 更新状态 所谓改变状态，并不想修改老状态，目标是返回一个新状态
function changeState(state, action){
}
// 初始渲染和更新渲染
function render(){
document.getElementById("count").innerHTML = store.getState().count
}
// 使用之
let store = createStore(countState ,changeState); // 创建一个仓库
// 先订阅
store.subscribe(render)
派发一个动作：
const createStore = (state, changeState)=>{
const getState = () => state
// 订阅
let listeners = [];
const subscribe = (listener) => listeners.push(listener)
// 发布
const dispatch = (action) =>{
state = changeState(state, action)
listeners.forEach(listener=>listener())
}
return {
// 返回的对象就可以称为一个仓库
dispatch, // 派发一个动作
getState, // 获取状态
subscribe // 订阅
}
}
// 初始化状态 老的状态
let countState = {
count:0 }
// 更新状态 所谓改变状态，并不想修改老状态，目标是返回一个新状态
function changeState(state, action){
switch(action.type){
case "INCREMENT":
// state.count += action.num // 修改的还是老状态
return{
count:state.count + action.num
}
case "DECREMENT":
// state.count -= action.num
return{
count:state.count - action.num
}
default:state; // 返回老状态
}
}
// 初始渲染和更新渲染
function render(){
document.getElementById("count").innerHTML = store.getState().count
}
// 使用之
let store = createStore(countState ,changeState); // 创建一个仓库
// 先订阅
store.subscribe(render)
完整版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 当点击加1时，需要派发一个动作，使用一个对象来描述这个动作 -->
<!-- 这个对应中有一个属性叫type {
type:"INCREMENT",num:1} -->
<!-- 封装一个方法用来派发这个动作 动作叫action -->
<button onclick='store.dispatch({type:"INCREMENT",num:1})'>加1</button>
<h1 id="count"></h1>
<button onclick='store.dispatch({type:"DECREMENT",num:1})'>减1</button>
<script>
// createStore需要传入一个初始化状态state
// 第2个参数是方法，用来改变状态 Store是仓库的意思
const createStore = (state, changeState)=>{
const getState = () => state
// 订阅
let listeners = [];
const subscribe = (listener) => listeners.push(listener)
// 发布
const dispatch = (action) =>{
state = changeState(state, action)
listeners.forEach(listener=>listener())
}
return {
// 返回的对象就可以称为一个仓库
dispatch, // 派发一个动作
getState, // 获取状态
subscribe // 订阅
}
}
// 初始化状态 老的状态
let countState = {
count:0 }
// 更新状态 所谓改变状态，并不想修改老状态，目标是返回一个新状态
function changeState(state, action){
switch(action.type){
case "INCREMENT":
// state.count += action.num // 修改的还是老状态
return{
count:state.count + action.num
}
case "DECREMENT":
// state.count -= action.num
return{
count:state.count - action.num
}
default:state; // 返回老状态
}
}
// 使用之
let store = createStore(countState,changeState); // 创建一个仓库
// 初始渲染和更新渲染
function render(){
document.getElementById("count").innerHTML = store.getState().count
}
// 刚上来，就需要把初始化状态渲染到页面
render();
// 先订阅
store.subscribe(render)
</script>
</body>
</html>