1, Why redux
In React, the data flows in one direction in the module, the data flow from a parent component subassembly direction (by The props), therefore, it is relatively cumbersome two non-communication between components Sons, Redux appear to solve the state inside the data problems
2, Redux design
Redux is to store the entire application state to a place called the store , which holds a state tree store Tree , components can be distributed (dispatch) behavior (action) to store, rather than directly notify other components, internal components by subscribing to store in state state to refresh their view.
3, Redux three principles
- 1 unique data source
- 2 remain read-only
- 3 data change can be performed by a pure function
1 unique data source
state throughout the application are stored in a tree inside state, and the state tree, exist only in the store unique
2 remain read-only
state is read, the only way is to change the state of the trigger action, action is described in a time of occurrence of a normal object for
3 data change can be performed by a pure function
The use of pure function to perform the modification, in order to describe how to change the state of the action, you need to write reducers
Perhaps you've read this unintelligible, and nothing it's just to let you know some of the redux in the end is doing it, or behind a detailed explanation of the role of the various parts, and will explain the realization of the principle redux
4, Redux analytical concept
4.1 Store
- store is the place to store data, you can see it as a data, application intelligence has a whole store
- Redux createStore provide this function for generating Store
import {createStore} from 'redux'
const store=createStore(fn);
4.2 State
data state is stored inside the store, which store can have multiple state, a state corresponding to a predetermined Redux View, as long as the same state, the View is the same, and vice versa, and by store.getState () Gets
import {createStore} from 'redux'
const store=createStore(fn);
const state=store.getState()
4.3 Action
state changes can lead to changes in the View, but you can not operate state that is not in use redux in this.setState to operate, users can only access to the View. It provides an object in the Redux tell Store needs to change state. Action is an object of which type attribute is required, indicate the name of Action, the other can be set freely according to demand.
const action={ type:'ADD_TODO', payload: 'Redux principle' }
In the above code, the name of the Action is ADD_TODO, carrying data string 'redux principle', Action describes what is going, this is the only way to change the state of the
4.4 store.dispatch( )
store.dispatch () is the only way to view the issue Action
store.dispatch({ type:'ADD_TODO', payload: 'Redux principle' })
receiving a store.dispatch Action as a parameter, it sends a notification to the store to change the store state.
4.5 Reducer
Store after receipt of Action, we must be given a new state, this view will change. This calculation procedure of state called Reducer.
Reducer is a pure function, he receives the Action and the current state as a parameter and returns a new state
Note: Reducer must be a pure function, that function returns the result to be determined by the parameters of state and action, but does not produce any side effects and can not be modified state action objects
const reducer =(state,action)=>{ switch(action.type){ case ADD_TODO: return newstate; default return state } }
5, Redux source
Inside the comment is my step-by-step analysis of the code a little lazy did not split out to see you
let createStore = (reducer) => { let state; // Get the state object // store all listening function the let the Listeners = []; getState the let = () => State; // provides a method for external call distribution Action the let dispath = (Action) => { // call the new administrator reducer obtained State State = reducer (State, Action); // perform all listening function listeners.forEach ((L) => L ()) } // Subscribe state change event, when the state changed the function execution monitor the let the Subscribe = (listener) => { listeners.push(listener); } dispath(); return { getState, dispath, subscribe } } combineReducers the let = (renducers) => { // pass renducers a management group, a return is renducer return function (State = {}, Action = {}) { let newState={}; for(var attr in renducers){ newState[attr]=renducers[attr](state[attr],action) } return newState; } } export {createStore,combineReducers};
6, Redux use cases
html code
<div id="counter"></div> <button id="addBtn">+</button> <button id="minusBtn">-</button>
js code
function createStore(reducer) { var state; var listeners = []; var getState = () => state; var dispatch = (action) => { state = reducer(state, action); listeners.forEach(l=>l()); } var subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter((l) => l != listener) } } dispatch(); return { getState, dispatch, subscribe } } var reducer = (state = 0, action) => { if (!action) return state; console.log(action); switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } var store = createStore(reducer); store.subscribe(function () { document.querySelector('#counter').innerHTML = store.getState(); }); document.querySelector('#addBtn').addEventListener('click', function () { store.dispatch({type: 'INCREMENT'}); }); document.querySelector('#minusBtn').addEventListener('click', function () { store.dispatch({type: 'DECREMENT'}); });
