Environmental preparation
For convenience, here we use create-react-app to build a react environment
create-react-app mydemo
Popup configuration
If you need to customize react configuration, you need to run the following command to pop up the configuration file.
npm run eject
Install redux
npm i redux --save
Simple understanding
The simple usage of redux is to subscribe and publish information through its store.
Subscribe to the action through subscribe and trigger the action through dispatch. The reducer defines what each action needs to do.
demo code
Reducer definition
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
switch () {
case Add:
return state + 1;
case Remove:
return state - 1;
default:
return 10;
}
}
//action creator, encapsulate action into a method, so that you don't need to define it every time when using it, so as to avoid errorsexport function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
Entry file
import React from 'react';
import ReactDOM from 'react-dom';
import './';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
(
<App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
('root')
);
}
//Embroidery into a method to facilitate subscription calls of the following storerender();
// Whenever dispatch, the subscribed function will execute(render);
registerServiceWorker();
import React, { Component } from 'react';
import './';
class App extends Component {
render() {
var store=;
var num=();
return (
<div className="App">
<h1>There are machine guns now{}Bundle。</h1>
<button onClick={() => { (()) }}>add</button>
<button onClick={() => { (()) }}>remove</button>
</div >
);
}
}
export default App;
The action is triggered through the store dispatch, and the subscribed events will be executed.
Asynchronous execution of redux
If you need to perform asynchronous operations in redux, you need to install the react-thunk plug-in
npm i react-thunk --save
ApplyMiddleware, which requires redux plugin
Key Code
Setting up is actually very simple. When creating a store, just pass the thunk to it.
import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));
Add a button to trigger an asynchronous operation, and an asynchronous method has been defined in the reducer.
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}
Asynchronously calling a method will return a method with two parameters, both parameters are functions, the first is the dispatch function, and the second is the getState function.
dispatch triggers action, getState gets the value of state.
Add code in
<button onClick={() => { (()) }}>addAsync</button>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.