Redux

The core

Redux introduces

Javascript state containers that provide predictable state management

What is a state

  • Page Current page status

  • A dialog box is displayed to hide or display the status

What is a state container

  • A state container is a JavaScript object
  • Converting these states into data on the page is stored in a JavaScript object that is a state container

Benefits of state containers

  • Dom and state are left to the framework to handle, do not need to manipulate dom elements, directly manipulate dom elements corresponding to the state object can be

Benefits of using Redux

  • Scientific state management mode makes state management easy
  • Through scientific state management, when the state changes, the state becomes predictable, and it is very convenient to locate the problem

Redux core concepts and workflow

  • Store: A container for storing state, JavaScript objects

  • View: An HTML page

  • Actions: object describing what Actions are taken on state

    • Fixed attributestypeValues are developer – defined

  • Reducers: Function that manipulates the state and returns a new state

The working process

Because all state is stored in the Store, views cannot manipulate state directly

To change the state in the Store, the view must first trigger an Actions that describes the current operation through the Dispatch method. This Actions are received by the Reducer, and the Reducer processes the state differently based on the type value of Actions. When Reducer processing is complete, return value is sent to the Store to update the state in the Store. When the state in the Store is updated, the state in the view is synchronized with SUBSCRIBE

Learn about Redux by using the counter case

Implementation effect

Use Redux to implement the above counter function, click + button value +1 click – button value minus 1;

  1. New HTML introduces redux.js
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>

<body>
  	<div>
        <button id="plus">+</button>
        <span id="count">0</span>
        <button id="minus">-</button>
    </div>
  
  	<script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
  	<script>
  			// Write the code here
    </script>
</body>
</html>
Copy the code
  1. Creating a Store object
function reducer() {
  return {
    count: 0}}// 1. Create a store object
const store = Redux.createStore(reducer)

// Prints the store object
console.log(store)
/* dispatch: ƒ Dispatch (action) getState: ƒ getState() replaceReducer: ƒ replaceReducer(nextReducer) ƒ subscribe(listener) Symbol(Observable)ƒ: Observable () */
Copy the code
  1. Modify the Reducer method to store the default file
var initialState = {
  count: 0
}
Create the reducer function
function reducer(state = initialState) {
  return state
}
Copy the code
  1. Define actions that change data and make different actions on the corresponding actions in the Reducer function
var increment = {
  type: 'increment'
}
var decrement = {
  type: 'decrement'
}
// The second argument is actions for the action
function reducer(state = initialState, action) {
  console.log(action)
  switch (action.type) {
    case 'increment':
      return {
        count: state.count + 1
      }
    case 'decrement':
      return {
        count: state.count - 1
      }
    default:
      return state
  }
}
Copy the code
  1. Get button to add click event to trigger corresponding action
document.querySelector("#plus").addEventListener('click'.() = > {
  store.dispatch(increment)
})
document.querySelector("#minus").addEventListener('click'.() = > {
  store.dispatch(decrement)
})
Copy the code
  1. Subscribe to store and update status to page
store.subscribe(() = > {
  // Get the data in the store object
  document.querySelector('#count').innerHTML = store.getState().count
})
Copy the code

Redux core API

  • CreateStore: Creates a Store state container
const store = Redux.createStore(reducer)
Copy the code
  • Reducer: Create a reducer function to handle the state
function reducer (state = initialState, action) {}
Copy the code
  • GetState: obtain the status
store.getState()
Copy the code
  • Subscribe: indicates the status of the subscription
store.subscribe(function () {})
Copy the code
  • Subscribe: Triggers an Action
store.dispatch({type: 'description... '})
Copy the code

This article is published by OpenWrite!