Table of Contents 1. store.ts 2. reducer.ts 3. ReduxProvider.tsx 4. mapStateToProps.ts 5. mapDispatchToProps.ts 6. Todo component (outermost package ReduxProvider 7. Subcomponents involved in the Todo component 1) TodoInput.tsx 2) TodoList.tsx 3) TodoItem.tsx 8. App components use Todo components 1. store.ts Reference website: GitHub – zalmoxisus/redux-devtools-extension: Redux DevTools extension. Download the Google extension plug-in address: react-redux-devtools: […]
Tag: redux
web3 takes out all completed orders from redux and renders them into the corresponding Table list
The above web3 React dapp project gets canceled and completed and all order data from the blockchain through events and stores them in redux. In we have got our order from the block Then we restore the above environment ganache ganache -d Then log in to MetaMask Then use our project to publish the contract […]
The web3 React dapp project gets canceled and completed and all order data from the blockchain through events and stores them in redux.
Okay, above, web3 uses antd to build the basic structure of the order component in the React dapp. We have demonstrated a basic order component. Then let’s continue and start with the environment. ganache terminal run ganache -d MetaMask Log in Then open the project and publish the contract truffle migrate –reset Then run the […]
React technical principles and code development practice: combined use of React and Redux
Author: Zen and the Art of Computer Programming 1. Background Introduction React is a JavaScript library for building user interfaces, created and open sourced by Facebook. Like other JavaScript frameworks, React’s biggest feature is that it is easy to use and can easily implement various functions. React is not only a front-end framework, it is […]
React simple server rendering example (including the use of redux, redux-thunk)
1. package.json { “name”: “react-server”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “dev”: “npm-run-all –parallel dev:**”, “dev:build:client”: “webpack –config config/webpack.client.js –watch”, “dev:build:server”: “webpack –config config/webpack.server.js –watch”, “dev:start”: “nodemon –watch dist –exec node “./dist/bundle.js”” }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “@babel/core”: “^7.0.0”, “@babel/plugin-proposal-private-property-in-object”: “^7.21.11”, “@babel/preset-env”: “^7.22.20”, “@babel/preset-react”: “^7.22.15”, “@babel/preset-stage-0”: “^7.8.3”, “@babel/preset-typescript”: “^7.23.0”, […]
Build a front-end development project from scratch based on Vite4, Typescript, React18, react-router-dom6.4, Redux4, Reduxjs/toolkit, and Ant Design5.9
Build a front-end development project from scratch based on Vite, Typescript, React, react-router-dom, Redux, Reduxjs/toolkit, and Ant Design vite project initialization Native environment node v16.14.2 npm 8.5.0 yarn 1.22.18 vite project initialization yarn create vite Follow the steps to enter the project name, select React for the framework, and use TypeScript for js to create […]
Using redux in react && react-redux usage demo
Foreword: Redux is a state management tool that can store and operate some global or common data that many components need to use. To be fair, the use of redux is not very friendly to newcomers. The combined use of multiple dependency packages and multiple APIs is relatively more troublesome than vuex, which does the […]
Can useReducer+createContext really replace Redux?
Concept useReducer useReducer is a state management hook provided by React, usually used to manage complex state logic of components. It takes two parameters: the reducer function and the initial state. The Reducer function accepts the current state and an action and returns a new state. This is somewhat similar to the reducer function in […]
Handwritten redux connect method, using subscribe to get the latest data
1. Public method files 1. connect file import React, { useState } from “react”; import MyContext from “./MyContext”; import _ from “lodash”; // Simulate the connect high-order function of react-redux const connect = (mapStateToProps, mapDispatchToProps) => { return (Component) => props => wrapper(Component, {mapStateToProps, mapDispatchToProps, …props}); }; const wrapper = (Comp, props) => { const […]
react-component communication (redux)
Component communication Parent-child component communication Communication between parent and child components in Vue, parent passes to child: props, child component notifies parent component: this.$emit In react, parent-child component communication Pass from parent to child: use props attribute to pass The child component notifies the parent component to modify the data by calling the function passed […]