review

  • React (1) Uncover the JSX syntax and virtual DOM
  • React (2) Implement a simple version of HTML +redux.js demo
  • React uses redux to implement a simplified counter in React
  • React redux-Saga (redux-Saga
  • React (5) DVA (Zero Configuration)

preface

First, redux works with frameworks like JQ, not just React. In order for everyone to understand, we will implement only the simplest version of HTML +redux.js.

Why redux

With the complexity of single-page applications, it was difficult to share state between unrelated components, and Redux solved the data problem

Redux design idea

  • Redux stores the entire application state in one place, called a store
  • Save a state tree inside
  • Components can dispatch actions to stores instead of notifying other components directly
  • Other components can refresh their views by subscribing to states in the Store

Redux’s Three principles

Single data source

  • The state of the entire application is stored in a repository called a Store, and there can only be one store for the entire application.

Read-only state

  • The only way to change state is to dispatch(Action), which is to dispatch the action.

Use pure functions to perform the modifications

  • Write a Reducer with a pure function for each action to describe how to modify state

All this talk, can’t understand? It doesn’t matter, there are three concepts state, Reducer and Action. Let’s go through the API one by one

Concept of analytical

1. Store Warehouse

  • Redux provides a createStore function that generates a store
  • A store is a place where data is stored, so you can think of it as a container. There can only be one store for the entire app
Function createStore(reducer) {// Create a reducer... } let store = createStore(reducer)Copy the code

2

The Store object contains all the data. If you want point-in-time data, take a snapshot of the Store. This collection of data at this point in time is called State. The current State can be obtained from store.getState().

let state = store.getState()
Copy the code

3

  • Action must be an object,type is required, and the user can send an action to change state.
Let action = {type:"change_title_text", text:" change_title_text"}Copy the code

4. Store. Dispatch (action) Send an action

  • Store.dispatch () is the only way to issue an action
let store = createStore(reducer); Store. Dispatch (action) //action=>{type:"change_title_text",text:" title changed "}Copy the code

Reducer Administrators, also known as processors

  • When a Store receives an action, it dispatches (Action) and must return a new state for the view to change.
  • This state calculation process is called Reducer, which is a pure function that accepts state and action as parameters and returns a new state
let reducer = function(state,action){
    return new_state;
}
Copy the code

After all this nonsense, I’m glad I got the basic concept out of the way and finally got to see how it works. Let’s make the simplest calculator we can, add one, and see how redux works, okay

Counter Implementation Steps (REDUx)

Declare an initialization state

let initState = {number:0}
Copy the code

2. CreateStore focus

  • Create repository, save state, expose current state =>getState and how to change state => Dispatch
Let createStore=(reducer)=> Function dispatch(action) {state= reducer(state,action); // Call a written method that returns a new state} dispatch({}); Let getState = ()=> json.parse (json.stringify (state)); Return {getState, dispatch}; }Copy the code
  • Action is an object =>{type:”add”,count:5}, the type is add, each click increment 5
  • When the repository is created, state is assigned the default state by calling dispatch({}) first
  • The getState method is exposed so that the user can obtain the latest status
  • The dispatch method is exposed so that users can dispatch actions

When confused, you are assigning a default value to state as long as you know that there is only one purpose. First dispatch ({}) = > reducer (state, action). You can assign the default value to pull. Why

3. Reducer implementation

  • Administrator, which can return different states depending on the type
Let reducer=(state=initState,action)=> {// Set reducer=(state=initState,action)=> {// Set reducer=(state=initState,action); return {number:state.number+action.count} } return state; };Copy the code

All right, so far, let’s go through some ideas

  • Let Store = createStore(Reducer) what happened and how did we assign the initial state to state
  • Steps to dispatch ({}) = > reducer (initState, action) = > state = initState

4. Render the page view in its initial state

let store = createStore(reducer);
function render() {
    let content = document.querySelector('.content');
    content.innerHTML = store.getState().getState().number;
}
render();
Copy the code
  • Bind the page view to state in the Store. See the effect

So far, so good, so how do we change the state by clicking a button, only with the store.dispatch() method

5. Click Change View

btn.onclick = function () {
    store.dispatch({type:"add",count:5});
    render()
}
Copy the code

Redux is one of the simplest applications we have implemented so far. Redux is relatively simple to use in react

  • Redux all source code analysis, can refer to my summary
  • More quality articles for reference