Tag: react-redux

react-redux (from shallow to deep)

Article directory 1. redux 1.1 Overview and usage principles 1.2 Workflow 1.2.1 Three cores 1.3 stores 1.4 actions 1.5 reducers 1.5.1 Merging reducers 1.6 dispatch getState and status update 2. react-redux 2.1 Basic features 2.2 connect(), mapStateToProps 2.3 mapDispatchToProps? 2.4Provider 2.5. Middleware, combineReducers function, redux-devtools 3. Redux Toolkit 3. 1 Basic features and API 3.2 […]

Use of react-redux

Basic use of react-redux index.js import React from ‘react’; import ReactDOM from ‘react-dom/client’; import App from ‘./App’; import store from ‘./redux/store’; const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render(<App />); // Detect state changes in redux, if the state of redux changes, re-render the App component store. subscribe(()=>{ root.render(<App />); }) Parameters passed by app.js store to subcomponents […]

The basic use of react-redux + @reduxjs/toolkit in react project

Directory 1. Download the third-party package: 2. Directory structure: 3. store/index.js file: 3.1 Imported from the @reduxjs/toolkit library: 4. store/slice/cate.js: 5. Page components under components: index.js file: 1. Download third-party packages: npm i react-redux @reduxjs/toolkit 2. Directory structure: 3.store/index.js file: 3.1 Imported from @reduxjs/toolkit library: configureStore: used to create a store object and receive a […]

React-redux (functional components)

Next, a case of adding and subtracting numbers will be used to illustrate the use of React-redux Install library Install redux library, react-redux library, redux-thunk library yarn add redux yarn add react-redux yarn add redux-thunk Redux Definition: redux is a JS library dedicated to state management (not a react plugin library) The core is store […]

Haike List – Level 1 and Level 2 Permission Increase – react-mongoose-react-redux

//backend const mongoose = require(‘mongoose’) mongoose.set(‘strictQuery’,true) mongoose.connect(‘mongodb://127.0.0.1:27017/db_zg4yk’) conn=mongoose.connection conn.on(‘open’,()=>{<!– –> console.log(‘Database connection succeeded’) }) conn.on(‘error’,err=>{<!– –> console.log(‘Database connection failed’) }) module.exports=mongoose //model.js const mongoose = require(‘./db’) const Schema = mongoose.Schema const listScheam=new Schema({<!– –> name: String, form:Array, browse:Number, sort:Number, isshow: Boolean, date: Date, children: Array, },{<!– –>versionKey:false}) let listModel = mongoose. model(‘list’, listScheam, ‘list’) module.exports={<!– […]

React + react-redux + @reduxjs/toolkit shopping cart simple functionality

1. Front end: components store components router routing store creates a store object and stores state’ index.js introduces Provider and store objects. App.js imports the created routes. Directory · 2. Create a store object: 2.1: Install react-redux and @reduxjs/toolkit npm i react-redux @reduxjs/toolkit 2.2 Store directory 2.3 index.js file under store 2.4 slice under store: […]

React-Redux

Article directory 1. Reduce core 1. Introduction to Redux 3. Redux core concepts and workflow 4. Redux Core API 2. React + Redux 1. Problems encountered when not using Redux in React 2. The benefits of adding Redux to React projects 3. npm install redux react-redux 4. Redux operation process 5. Redux usage steps 1. […]

One article to get the realization principle of Redux/React-Redux/middleware

The Redux source code was implemented a long time ago, but no documentation was formed. Recently, I have time to organize this article, and we will learn together: Functional programming: currying, compose aggregate function (advantages are flexible, disadvantages are convoluted), onion model The design principle and source code implementation of redux ApplyMiddleware function principle and […]