redux相关用法

redux是一个单独的单一资源状态库，可以用于不同的框架。

核心代码<基础代码>：

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("有更新", store.getState());
});
store.dispatch({ type: "add" });

注意：页面刷新仓库会回到初始化

1.在react中使用步骤

（1）下载redux仓库
初始化项目时用：npx create-react-app react-redux-example
初始化项目没有redux,再添加的使用：npm install redux react-redux

（2）入口index.js中

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.导出Provider传入仓库store */}
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
);

(3)App.js中

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

function App(props) {
    const handleClick = () => {
        console.log(props, "===>触发点击事件接受props");
        // 4.修改状态里的值
        const { dispatch } = props;
        dispatch({
            type: "add",
        });
    };
    return (
        <div className="App">
            <h1>
                {props.user}:{props.couter}
            </h1>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

// 5.创建映射，并connect(mapStateToProps)(App),在props.couter中获取值
const mapStateToProps = (state) => {
    console.log("mapStateToProps");
    return {
        user: state.user,
        couter: state.couter,
    };
};
// 3.用import {connect} from 'react-redux'导出的connect连接App
export default connect(mapStateToProps)(App);

（4）src/store/index.js中

// 1.创建仓库
import { createStore } from "redux";
import reducers from "./reducers";

const store = createStore(reducers);

store.subscribe(function () {
    console.log("有更新", store.getState());
});

export default store;

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

import couter from "./couter";
import user from "./user";
// 6.合并多个状态
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 = "未知", action) {
    switch (action.type) {
        case "set":
            return action.name;
        default:
            return state;
    }
}

export default user;

运行结果：

 

 

深入了解redux相关连接：Redux 循序渐进，第一节：Redux 概述和概念 | Redux 中文官网