1. Redux state management
Step 1: Create warehouse vuex ===== redux
1, Download and install the redux module and react-redux module
npm install redux --savenpm install react-redux --save2, Create the data warehouse file src/store/index.js Import from redux to create the function creatStore, merge the function combineReducers
import { createStore, combineReducers } from "redux";3, Define the reducer function
function countReducer(state = 0, action){
switch (action.type) {
case "ADD":
return state + action.number
default:
return state
}
}4, Merge multiple reducer functions into one
var reducers = combineReducers({
count: countReducer,
})5, Create and export the data warehouse
export default createStore(reducers)
Step 2: Read warehouse data
**1, Import the state warehouse store and state update supply component Provider in the entry file index.js **
import { Provider } from "react-redux";
import store from "./store/index";
2. In the entry file index.js, use Provider to wrap the App root component, and set the store
<Provider store={store}>
<App />
</Provider>
3, Import the state warehouse joint function connect (higher-order component) in the component that uses state management
import { connect } from "react-redux";
4. Before exporting components, create a state data mapping function to map state data
function mapState(store){
return {
name: [store.name](http://store.name),
}
}
5. Before exporting the component, use the joint function connect to splice the state data in the warehouse into the props of the component
MyCom= connect(mapState)(MyCom)6, Call the data in the state warehouse through this.props in the component
Step 3: Update warehouse data
1. The connect high-level component will pass the dispatch function to the current component props for updating state data, and the parameter corresponds to the second parameter action of the reducer function
In the position that needs to be updated, update the data in the warehouse
this.props.dispatch({
type: "CHANGE",
value: this.refs.input.value
})Additional: Monitor data updates in the warehouse
2, Import the state warehouse into the component that needs to monitor the update
import store from "../../store/index"
store.subscribe(()=>{
console.log("数据已更新")
})Note 1: store.subscribe() will return a function after adding the monitor, calling the returned function can end the monitor
Note 2: If the hooks error is reported, please reduce the react-redux version to 5.0 and try again
2. mobx state management
There are two ways of writing mobx state management: decorator writing and non-decorator writing, and the official recommendation is to use decorator syntax
(1): Non-decorator syntax:
1, Download and install the module
mobx 和 mobx-react
cnpm i mobx mobx-react --save
2, Create a state management file /src/store/index.js to import tool functions
import { observable, action } from "mobx";
3, Define state management warehouse data and data update functions
let appState = observable({
name: 'zhangsan'
});
appState.setName = action((value) => {
[appState.name](http://appState.name) = value;
});4, Export status management warehouse
export default appState
5. Import the state warehouse store and state update supply component Provider in the entry file index.js
import {Provider} from "mobx-react"
import store from "./store/index"
6. In the entry file index.js, use Provider to wrap the App root component, and set the store
<Provider store={store} >
<HashRouter>
<App />
</HashRouter>
</Provider>7. Import the inject (injection) function and observer (observer) function in the component that uses state management, both of which are high-level components
import {inject, observer } from "mobx-react";
8. Before exporting components, use higher-order components to inject store into props and add observers
export default inject("store")(observer(Home))
9, Call the data or update function in the state warehouse through this.props.store in the component
this.props.store.setName("lisi")
(2): Decorator syntax (recommended):
1, The terminal executes instructions, exposing server configuration files and information
npm run eject2. Find the bebel property under the package.json file, and add the following configuration
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]3, Download and install the modules mobx and mobx-react
cnpm i mobx mobx-react --save4, Create a state management file /src/store/index.js to import tool functions
import { observable, action } from "mobx";5, Define warehouse class, create warehouse data and set update function
class Store {
@observable name = '铁柱';
@action setName (option) {
[this.name](http://this.name) = option
}
}6, Create a warehouse object and export it
export default new Store()7, Import the state warehouse store and state update supply component Provider in the entry file index.js
import {Provider} from "mobx-react"
import store from "./store/index"8. In the entry file index.js, use Provider to wrap the App root component, and set the store
<Provider store={store} >
<HashRouter>
<App />
</HashRouter>
</Provider>9. Import the inject (injection) function and observer (observer) function in the component that uses state management, both of which are high-level components
import {inject, observer } from "mobx-react";10. When the component is created, use the decorator syntax store to inject props and add observers
export default
@inject("store")
@observer
class Home extends React.Component{}
11, Call the data or update function in the state warehouse through this.props.store in the component
this.props.store.setName("lisi")
Note: If the status data is updated, the view is not refreshed, and no error is reported, it may be that the versions of mobx and mobx-react do not match. Note that the versions "mobx": "^5.15.4", "mobx-react": "^6.3.1 "
If it is useful, please like it, follow it and add to favorites (｡･ω･｡)ﾉ♡