原生计数器

本节目标：理解“原生计数器”的核心思路，并能把它用于实际开发或面试表达。

create-react-app zhufeng_redux_preparecd zhufeng_redux_preparenpm install redux -Syarn start

public\index.html
<!DOCTYPE

html>
<html

lang="en">

<head>

<meta

charset="utf-8"

/\>

<meta

name="viewport"

content="width=device-width,

initial-scale=1" /\>

<meta

name="theme-color"

content="#000000"

/\>

<meta

name="description"

content="Web

site created using create-react-app"/\>

<title>React

App</title>

</head>

<body>

<div

id="root"></div>

<div

id="counter">

<p

id="counter-value">0</p>

<button

id="add-btn">+</button>

<button

id="minus-btn">-</button>

</div>

</body>
</html>

src\redux\index.js
export

{ default as createStore } from

'./createStore';

src\redux\createStore.js
/**

* 创建仓库 * @param {*} reducer 处理器 * @param {*} preloadedState 默认状态或者说初始状态

*/
function

createStore(reducer,

preloadedState)

{let state =

preloadedState;

let listeners = [];function

getState()

{return

state;

}function

dispatch(action)

{//根据老状态和action动作，计算新状态 state =

reducer(state,

action);

listeners.forEach(l

=\>

l());

}function

subscribe(listener)

{

listeners.push(listener);

}return {

getState,//

用来获取当前的仓库中的状态

dispatch,//

向仓库派发动作

subscribe,//

用来订阅仓库中的状态的变化

}
}
export

default

createStore;

src\index.js
/**

* redux不需要依赖react

*/
import

{ createStore } from

'./redux';
const

ADD =

'ADD';
const

MINUS =

'MINUS';
let

initialState =

0;
/**

** @param {*} oldState 老状态可以是任何类型的数据 * @param {*} action 动作对象普通的JS对象 {type:'ADD',payload:1}

*/
function

reducer(oldState,

action)

{switch

(action.type)

{case

ADD:

   `return` `oldState` `+`

1;

 `case`

MINUS:

   `return` `oldState` `-`

1;

default:

   `return`

oldState;

}
}
let

store =

createStore(reducer,

initialState);
let

counterValue =

document.getElementById('counter-value');
let

addBtn =

document.getElementById('add-btn');
let

minusBtn =

document.getElementById('minus-btn');
function

render()

{

counterValue.innerHTML

=

store.getState();
}
render();
store.subscribe(render);
addBtn.addEventListener('click',

() =\>

store.dispatch({

type: ADD

}));
minusBtn.addEventListener('click',

() =\>

store.dispatch({

type: MINUS }));

原生计数器 ​