Redux learning notes

There is no necessary relationship between redux and react. redux can be applied to various frameworks, including jquery and even js. However, redux and react are more matched. redux also launched react redux, which is specially used for react.

1. Overview of Redux

• Redux is a JavaScript container for global state management
• Three cores of Redux
  • Single data source (all state data are stored in an Object Tree)
  • State is read-only (you can only modify it by sending an action)
  • Use pure functions to modify (using pure functions can improve reusability. reduce is a pure function used to receive action s)

2. Composition of Redux

• State state
  • DomainState: the State returned by the server
  • UI State: State about the current component
  • APP State: global State
• Action event
  • It is essentially a JS object
  • The type attribute must be included
  • It only describes what happens, not how to update the State
• Reducer
  • The essence is function
  • action sent in response
  • The function receives two parameters. The first is to initialize state and the second is the action sent
• Store
  • It is used to associate action with reducer
  • Build the store through createStore
  • Register listening through subscribe
  • Send action through dispatch

3. Introduction to Redux

Data flow

It is to update the data in the store through store.dispatch, and then update the data in the store according to the processing logic in the reducer method. The component will get the updated data through store.subscriber listening. You can update the data through setState and other methods, and then update the component again

Simple steps

1. Build an action object and return an object by creating a function. The returned action object needs to have a type attribute, otherwise an error will be reported.

   action.js

   export const sendAction = (action)=>{
       return{
           type: "sendAction",
           ...action
       }
   }
   

2. Build a reducer to respond to the action, and then conduct separate data processing through the type value of the action and return the data to the store.

   reducer.js

   const initState = {value: "This is sate Default value"};
   
   export const reducer = (state = initState, action ) => {
       console.log("reducer",state,action)
       switch (action.type) {
           case "sendAction":
               return Object.assign({},state,action);
   
           default :
               return state;
       }
   }
   
   

3. To build a store, create a store through createRedux in redux. createStore needs to pass in the built reducer function, so that the data will be processed according to the processing logic of the defined reducer function.

   store.js

   import {createStore} from "redux";
   
   import {reducer} from "./reducer";//Customized reducer function
   
   export const store = createStore(reducer);
   

4. Use store.subscriber() to register for listening and receive the updated data of the store.

   home/index.js

   store.subscribe(() => {
               console.log("subscribe",store.getState())
           })
   

5. When you use store.dispatch to send an action, you can trigger listening. In listening, you can get the updated value through store.getState().

   home/index.jsx

   import React, {Component} from 'react';
   import {sendAction} from "../action";
   import {store} from "../store";
   
   class Home extends Component {
       constructor(props){
           super(props);
           this.state = {
               actionValue: "",
           };
   
       }
       componentDidMount() {
           //Receive store updated data
           store.subscribe(() => {
               console.log("subscribe",store.getState());
               this.setState({actionValue: store.getState().value});
           })
       }
       // Send action
       handleAction = () =>{
           const action = sendAction({value:"This is a action"});
           store.dispatch(action);
       }
       render() {
           return (
               <div>
                   <button onClick={this.handleAction}>Send a action</button>
                   <div>
                       <h4>This is action Value of: {this.state.actionValue}</h4>
                   </div>
               </div>
           );
       }
   }
   
   export default Home;