Redux Getting Started Tutorial 1

Novice look online Some redux articles, very easy to be confused by those concepts, I follow the official example to write a series of novice tutorials, we can refer to, reproduced please indicate the source

Tutorial 1 is no use of react, and does not use NPM these things, it is very suitable for everyone to understand the redux in essence.

1. Load redux.js <script src= "Https://npmcdn.com/[email protected]/dist/redux.min.js" ></script>

2.html

<div id= "Container" >
<button onclick= "Select (' A ')" >click a</button>
<button onclick= "Select (' B ')" >click b</button>
<button onclick= "Select (' C ')" > click c</button>
<div id= "Show" > </div>
</div>

3.js

Handlestore equivalent to a function of the control store

function Handlestore (store, action) {
if (typeof store = = = undefined) {
return false;
}

Switch (action.type) {
Case ' A ': return ' this is a '; Break
Case ' B ': Return ' this is B '; Break
Case ' C ': Return ' this is C '; Break
Default:return ' This is None '; Break
}
}

Store created via CreateStore
var store = Redux.createstore (Handlestore);

Store changes can be observed through subscribe

Store.subscribe (function () {
document.getElementById (' show '). InnerHTML = Store.getstate (). toString ();
});

Initialize execution

Select (");

function Select (item) {
Store.dispatch ({
Type:item
});
}

All source code:

<! DOCTYPE html>
　　
Redux Getting Started Tutorial 1