Redux related usage

redux Is a separate single resource state Repository , It can be used in different frameworks .

Core code < Basic code >：

import { createStore } from "redux";
function couter(state = 0, aciton) {
    switch (aciton.type) {
        case "add":
            return state + 1;
        default:
            return state;
    }
}
const store = createStore(couter);
store.subscribe(function () {
    console.log(" There are updates ", store.getState());
});
store.dispatch({ type: "add" });

Be careful ： The page refresh warehouse will return to initialization

1. stay react Use steps in

（1） download redux Warehouse
Initialize the project with ：npx create-react-app react-redux-example
The initialization project does not redux, Re added use ：npm install redux react-redux

（2） entrance index.js in

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
// import reportWebVitals from './reportWebVitals';

import { Provider } from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        {/*  2. export Provider Incoming warehouse store */}
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
);

(3)App.js in

import "./App.css";
import { connect } from "react-redux";

function App(props) {
    const handleClick = () => {
        console.log(props, "===> Trigger click event acceptance props");
        // 4. Modify the value in the status 
        const { dispatch } = props;
        dispatch({
            type: "add",
        });
    };
    return (
        <div className="App">
            <h1>
                {props.user}:{props.couter}
            </h1>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

// 5. Create mapping , and connect(mapStateToProps)(App), stay props.couter Get the value 
const mapStateToProps = (state) => {
    console.log("mapStateToProps");
    return {
        user: state.user,
        couter: state.couter,
    };
};
// 3. use import {connect} from 'react-redux' Derived connect Connect App
export default connect(mapStateToProps)(App);

（4）src/store/index.js in

// 1. Create repository 
import { createStore } from "redux";
import reducers from "./reducers";

const store = createStore(reducers);

store.subscribe(function () {
    console.log(" There are updates ", store.getState());
});

export default store;

（5）src/store/reducers/index.js

import couter from "./couter";
import user from "./user";
// 6. Merge multiple states 
import { combineReducers } from "redux";

export default combineReducers({
    couter,
    user,
});

(6)src/store/reducers/couter.js

function couter(state = 0, action) {
    switch (action.type) {
        case "add":
            return state + 1;
        default:
            return state;
    }
}

export default couter;

(7)src/store/reducers/user.js

function user(state = " Unknown ", action) {
    switch (action.type) {
        case "set":
            return action.name;
        default:
            return state;
    }
}

export default user;

Running results ：

 

 

Deepen understanding redux Related connection ：Redux Step by step , Section 1 ：Redux Overview and concepts | Redux Chinese official website