First, you need to install ANTD and Redux to initialize the project

1. Characters in Redux

  • 🚀 Store:

    • Used to maintain the applicationstate;
    • createStore()To create astore;
    • providegetState()Methods to obtainstate;
    • providedispatch(action)Methods the updatestate;
    • throughsubscribe(listener)Register listeners;
    • throughsubscribe(listener)The returned function unlogs the listener.

  • 🚀 Reducer:

    • How does the specified application state respond to changesactionsAnd sent tostorethe

  • 🚀 Action:

    • Transfer data from application to applicationstoreThe payload of

Example 2. Story:

Directory structure:

SRC ├ ─ App. CSS ├ ─ App. Js ├ ─ index. The CSS ├ ─ index. The js ├ ─ logo. The SVG ├ ─ store | └ index. The js ├ ─ Components | └ ReduxTest. JsCopy the code

The code is 👇 :

🚀 storeIn theIndex. Js:

  • To create thereducerTo deal with specific operations
  • willreducerPure functions are passed as arguments tocreateStore()
  • exportstore;
/ / 🚀 SRC/store/index. Js

import {createStore} from "redux";

/ / create a reducer
function conter(state=0,action){
    switch (action.type){
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;
        default:
            returnstate; }}/ / create a store
const store = createStore(conter);
export default store;
Copy the code

🚀 srcIn theindex.js:

  • To create arenderFunction for rendering
  • willrenderThe render function is passed as an argument tostore.subscribe(render)
    • So that ifstroeIn thestateIf there is a change, then it will be implementedrenderThe function completes the re-rendering, updating the page view
// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from "./store";
import ReduxTest from "./Components/ReduxTest";

function render(){
    ReactDOM.render(
            <ReduxTest/>.document.getElementById('root')); } render();// 🚀 sign up to subscribe to render again every time state is updated
store.subscribe(render)
Copy the code

🚀 ReduxTest.js:

  • store.getState()To obtainreduxIn thestate

– store.dispatch() Dispatches an action

  • storeGot thisactionAlong with the previousstateAll together.reducerIn the
  • reducerTo go toaction.typeDo the processing and return a new onestatetostore
  • storeUpdate page data
// Components/ReduxTest.js

import React, {Component} from 'react';
import store from ".. /store";
import {Button} from "antd";
class ReduxTest extends Component {
    constructor(props) {
        super(props);
        this.increment = this.increment.bind(this);
        this.decrement = this.decrement.bind(this);
    }
    increment(){
        store.dispatch({type:"INCREMENT"})}decrement(){
        store.dispatch({type:"DECREMENT"})}render() {
        return (
            <div>
                <p>{store.getState()}</p>
                <Button type="success" onClick={this.increment}> + 1 </Button>
                <Button type="primary" onClick={this.decrement}> - 1 </Button>
            </div>); }}export default ReduxTest;
Copy the code

At the heart of the Redux architecture's design: strict one-way data flow

Problem: Every state update rerenders, causing unnecessary duplication in large applications.

React-redux is recommended if you want to use redux more elegantly