react+redux from scratch
This time I will bring you react redux from scratch. What are the precautions for starting react redux from scratch? The following is a practical case, let's take a look.
Environment preparation
For convenience, create-react-app is used here to build the react environment
create-react-app mydemo
Pop-up configuration
If you need to customize the 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 action through subscribe and trigger 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 (action.type) {
case Add:
return state + 1;
case Remove:
return state - 1;
default:
return 10;
}
}
//action creator,把action封装成一个方法，这样用的时候不用每次定义，避免出错
export function addCreator() {
return { type: Add };
}
export function removeCreator() {
return { type: Remove };
}
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}Entry file index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import thunk from 'redux-thunk';
import { reducer,addCreator,removeCreaator } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer);
function render() {
ReactDOM.render(
<App store={store} addCreator={addCreator} removeCreator={removeCreator} />,
document.getElementById('root')
);
}
//封装成方法，方便下面的store的订阅调用
render();
//每当dispatch时，订阅的函数就会执行
store.subscribe(render);
registerServiceWorker();App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
var store=this.props.store;
var num=store.getState();
return (
<p className="App">
<h1>现在有机关枪{this.props.num}把。</h1>
<button onClick={() => { store.dispatch(this.props.addCreator()) }}>add</button>
<button onClick={() => { store.dispatch(this.props.removeCreator()) }}>remove</button>
</p >
);
}
}
export default App;To trigger action through store dispatch, the event subscribed in index.js 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
At the same time, you need the applyMiddleware of the redux plug-in
Key code
The setting is actually very simple. When creating the store, just pass the thunk to it.
import thunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(thunk));
Add a button that triggers an asynchronous operation in app.js. An asynchronous method has been defined in the reducer.
export function addAsync() {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(addCreator());
}, 1000);
}
}Asynchronously calling the 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, and getState gets the value of state.
Add code in app.js
<button onClick={() => { store.dispatch(this.props.addAsync()) }}>addAsync</button>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use React diff algorithm
##How to manage the vue project api interface
The above is the detailed content of react+redux from scratch. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
A Diffusion Model Tutorial Worth Your Time, from Purdue University
Apr 07, 2024 am 09:01 AM
Diffusion can not only imitate better, but also "create". The diffusion model (DiffusionModel) is an image generation model. Compared with the well-known algorithms such as GAN and VAE in the field of AI, the diffusion model takes a different approach. Its main idea is a process of first adding noise to the image and then gradually denoising it. How to denoise and restore the original image is the core part of the algorithm. The final algorithm is able to generate an image from a random noisy image. In recent years, the phenomenal growth of generative AI has enabled many exciting applications in text-to-image generation, video generation, and more. The basic principle behind these generative tools is the concept of diffusion, a special sampling mechanism that overcomes the limitations of previous methods.
Generate PPT with one click! Kimi: Let the 'PPT migrant workers' become popular first
Aug 01, 2024 pm 03:28 PM
Kimi: In just one sentence, in just ten seconds, a PPT will be ready. PPT is so annoying! To hold a meeting, you need to have a PPT; to write a weekly report, you need to have a PPT; to make an investment, you need to show a PPT; even when you accuse someone of cheating, you have to send a PPT. College is more like studying a PPT major. You watch PPT in class and do PPT after class. Perhaps, when Dennis Austin invented PPT 37 years ago, he did not expect that one day PPT would become so widespread. Talking about our hard experience of making PPT brings tears to our eyes. "It took three months to make a PPT of more than 20 pages, and I revised it dozens of times. I felt like vomiting when I saw the PPT." "At my peak, I did five PPTs a day, and even my breathing was PPT." If you have an impromptu meeting, you should do it
All CVPR 2024 awards announced! Nearly 10,000 people attended the conference offline, and a Chinese researcher from Google won the best paper award
Jun 20, 2024 pm 05:43 PM
In the early morning of June 20th, Beijing time, CVPR2024, the top international computer vision conference held in Seattle, officially announced the best paper and other awards. This year, a total of 10 papers won awards, including 2 best papers and 2 best student papers. In addition, there were 2 best paper nominations and 4 best student paper nominations. The top conference in the field of computer vision (CV) is CVPR, which attracts a large number of research institutions and universities every year. According to statistics, a total of 11,532 papers were submitted this year, and 2,719 were accepted, with an acceptance rate of 23.6%. According to Georgia Institute of Technology’s statistical analysis of CVPR2024 data, from the perspective of research topics, the largest number of papers is image and video synthesis and generation (Imageandvideosyn
From bare metal to a large model with 70 billion parameters, here is a tutorial and ready-to-use scripts
Jul 24, 2024 pm 08:13 PM
We know that LLM is trained on large-scale computer clusters using massive data. This site has introduced many methods and technologies used to assist and improve the LLM training process. Today, what we want to share is an article that goes deep into the underlying technology and introduces how to turn a bunch of "bare metals" without even an operating system into a computer cluster for training LLM. This article comes from Imbue, an AI startup that strives to achieve general intelligence by understanding how machines think. Of course, turning a bunch of "bare metal" without an operating system into a computer cluster for training LLM is not an easy process, full of exploration and trial and error, but Imbue finally successfully trained an LLM with 70 billion parameters. and in the process accumulate
Five programming software for getting started with learning C language
Feb 19, 2024 pm 04:51 PM
As a widely used programming language, C language is one of the basic languages that must be learned for those who want to engage in computer programming. However, for beginners, learning a new programming language can be difficult, especially due to the lack of relevant learning tools and teaching materials. In this article, I will introduce five programming software to help beginners get started with C language and help you get started quickly. The first programming software was Code::Blocks. Code::Blocks is a free, open source integrated development environment (IDE) for
PyCharm Community Edition Installation Guide: Quickly master all the steps
Jan 27, 2024 am 09:10 AM
Quick Start with PyCharm Community Edition: Detailed Installation Tutorial Full Analysis Introduction: PyCharm is a powerful Python integrated development environment (IDE) that provides a comprehensive set of tools to help developers write Python code more efficiently. This article will introduce in detail how to install PyCharm Community Edition and provide specific code examples to help beginners get started quickly. Step 1: Download and install PyCharm Community Edition To use PyCharm, you first need to download it from its official website
AI in use | AI created a life vlog of a girl living alone, which received tens of thousands of likes in 3 days
Aug 07, 2024 pm 10:53 PM
Editor of the Machine Power Report: Yang Wen The wave of artificial intelligence represented by large models and AIGC has been quietly changing the way we live and work, but most people still don’t know how to use it. Therefore, we have launched the "AI in Use" column to introduce in detail how to use AI through intuitive, interesting and concise artificial intelligence use cases and stimulate everyone's thinking. We also welcome readers to submit innovative, hands-on use cases. Video link: https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ Recently, the life vlog of a girl living alone became popular on Xiaohongshu. An illustration-style animation, coupled with a few healing words, can be easily picked up in just a few days.
A must-read for technical beginners: Analysis of the difficulty levels of C language and Python
Mar 22, 2024 am 10:21 AM
Title: A must-read for technical beginners: Difficulty analysis of C language and Python, requiring specific code examples In today's digital age, programming technology has become an increasingly important ability. Whether you want to work in fields such as software development, data analysis, artificial intelligence, or just learn programming out of interest, choosing a suitable programming language is the first step. Among many programming languages, C language and Python are two widely used programming languages, each with its own characteristics. This article will analyze the difficulty levels of C language and Python
