1. Redux in React is equivalent to VUex in Vue, both of which store data and are often used for frequent data interaction

To use Redux, you must install Redux

/ / install redux
yarn add redux
Copy the code

3. To use redux, create a store folder in the SRC folder and use it as a store folder. Create index.js and reducer.js and write:

Store/index. In js:

// Introduce the createStore object in redux
import { createStore } from "redux";
/ / into the reducer
import reducets from "./reducets";
// Create a repository with reducer data as the support
const store = createStore(reducets, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default store
Copy the code

Store/reducer. In js:


// Store data and process data

// Create an object to hold the initial default data
const defaultState = {
    / / input data
    inpVal: "".// List array
    ListArr: [
        'Racing car sprays burning fuel into crowd.'.'Japanese princess to wed commoner.'.'Australian walks 100km after outback crash.'.'Man charged over missing wedding girl.'.'Los Angeles battles huge wildfires.',].num: 0

}
The export in redux is not a direct export, but rather an arrow function
// eslint-disable-next-line
// Note :state: refers to the state of the original warehouse.
// Action: refers to the newly passed state of action.
export default (state = defaultState, action) => {
// Because reducer. Js is used to store and process data and cannot directly modify data, it is necessary to make a deep copy of data and then modify the data from the deep copy
    let ArrState = JSON.parse(JSON.stringify(state))
    return ArrState
}
Copy the code

4. Introduce the repository into the component

// Import to the repository
import store from "./store";
Copy the code

Also use data from the repository in the component

 constructor(p) {
        super(p)
        // Use store.getState() to retrieve data from the repository
        this.state = store.getState()
    }
Copy the code

5. Event-driven, write events in the following format in the component:

Then add corresponding data modification in store/reducer.js, because the data is in store/reducer.js and cannot be directly modified in the component, it is modified in the export in store/reducer.js as shown in the following data modification code

/ / export
// eslint-disable-next-line
// Note :state: refers to the state of the original warehouse.
// Action: refers to the newly passed state of action.
export default (state = defaultState, action) => {
    let ArrState = JSON.parse(JSON.stringify(state))
    //action.type corresponds to the type value in the action created when the event is event-driven
     //action.value corresponds to the value of the action created when the event is event-driven
    switch (action.type) {
        case CHANGE_FN_VAL:
            ArrState.inpVal = action.value
            break;
        case ADD:
            ArrState.ListArr.push(ArrState.inpVal)
            ArrState.inpVal = ""
            break;
        case ADDFN:
            ArrState.num += action.value
            break;

        default:
            break;
    }
    return ArrState
}
Copy the code

At this point, the event binding and event-driven data modification can also be implemented, but in the case of the input box, at this point, you can not input the input box, you need to do a subscription to the input box

Add store. Subscribe (this.changval.bind (this)) to the component

The code looks like this

// constructor(p) {
    // super(p)
    // this.state = store.getState()
      store.subscribe(this.ChangVal.bind(this))
    // }
Copy the code

Finally, the events in the subscription are driven to modify the data

 ChangVal() {
      this.setState(store.getState())
    }
Copy the code

At this point, you can implement in the input box input content, input real-time update data effect