The previous article introduced an example of using the redux framework to implement counters, and understood the design idea of redux. He separated the ui response from the data change, concentrated on processing state changes, and then rendered to the page. When there is a user operation, the ui response will not Immediately modify the state tree, but issue a modified instruction dispatch to tell the store how to modify it. When the command is issued, action.type will be specified, and if there are parameters, it will also be configured in the action object, such as action.color = 'blue'. The final action = {type: 'CHANGE_COLOR', color: 'blue'}, when the store receives the instruction, the reducer will be processed: the reducer decides how to modify the state based on the action.type, and will calculate a new one based on the previous state State. When the state tree is modified, the result of the modification needs to be reflected on the page, and then the page rendering method needs to be called. Therefore, monitoring of page rendering is maintained within the store. When the page is rendered, the state value in the store is obtained and the result is displayed on the page, so the store also needs to provide a getState () method to the outside. Including the dispatch instruction, it is also considered a store method.
We can draw this conclusion: store provides getState, dispatch, subscribe methods to complete these operations. The store is like the core of the entire operation, he is in charge of everything in the system.
Because the state is involved, and this state depends on the complexity of the system, the idea of the store is to give the state corresponding to each component to the outside to initialize. When you need to modify, you only need to know the previous state.
Here will give a native redux example to help us understand redux's design ideas. Our core store needs to be created like this:
function createStore(){
let state;
const getState = () => state
const subscribe = () => {}
const dispatch = (action) => {}
return {
getState,
subscribe,
dispatch
}
}
This code basically contains the main code to realize the design idea of redux. In addition, redux hopes that the state reducer should not be implemented in createStore (), and needs to be placed externally. Therefore, we need to pass the reducer in the form of passing parameters. , And then called in the dispatch function.
Based on this idea, we write a simple example to modify the color:
index-redux.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>redux-totorial</title>
<style>
*{margin:0;padding:0}
h2{padding:20px 0;}
button{padding:5px;border-radius:2px;border:1px solid #ccc;outline:none;cursor: pointer;color:#fff;}
#root{margin:0 auto;width:1000px;}
#btn-blue{background:blue;border-color:blue;}
#btn-green{background:green;border-color:green;}
</style>
</head>
<body>
<div id="root">
<h2 id="content">hello,redux.</h2>
<div>
<button id="btn-blue">blue</button id="btn-blue">
<button id="btn-green">green</button>
</div>
</div>
<script type="text/javascript">
const $ = (id) => document.getElementById(id)
const render = () => {
$('content').style.color = store.getState().color
}
const initState = {
color:'blue'
}
function reducer(state=initState,action){
switch(action.type){
case 'CHANGE_COLOR':
return {
...state,
color:action.color
}
default:
return state
}
}
function createStore(reducer){
let state;
let listeners = []
const subscribe = (ln) => {
listeners.push(ln)
const unsubscribe = () => {
listeners = listeners.filter(listener => ln!=listener);
}
return unsubscribe
}
const getState = () => state;
const dispatch = (action) => {
state = reducer(state,action)
listeners.forEach(ln => ln())
}
dispatch({type:'xxx'})
return {
getState,
subscribe,
dispatch
}
}
const store = createStore(reducer)
render()
store.subscribe(render)
$('btn-blue').onclick = function(e){
store.dispatch({type:'CHANGE_COLOR',color:'blue'})
}
$('btn-green').onclick = function(e){
store.dispatch({type:'CHANGE_COLOR',color:'green'})
}
</script>
</body>
</html>Open the page, the text of the h2 tag will display blue, when we click the two buttons to set, it will display blue and green respectively.
The example is very simple, but the idea is very important. The initial state, we will declare outside the createStore:
The reducer function will determine how to modify the state based on the initial state and the type of the action parameter, and return the new state:
The render function is our rendering function, it will be monitored by the store, and will be called after the dispatch execution is completed, to achieve the purpose of rendering:
The most important is the store creation function, which contains three main methods: getState, subscribe, and dispatch:
The dispatch instruction is issued when the ui responds, only the instruction is issued, no matter how it is modified and the rendering after the modification:
How to modify it to the reducer, the rendering after the modification is handed over to the subscriber's subscription function render.
