react使用react-redux状态管理

1、安装

复制代码
npm install react-redux

2、创建store.js

复制代码
import { createStore } from 'redux';

// 定义初始状态
const initialState = {
    counter: 888
};

// 定义 reducer 函数,根据 action 类型更新状态
function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {...state, counter: state.counter + 1 };
        case 'DECREMENT':
            return {...state, counter: state.counter - 1 };
        default:
            return state;
    }
}

// 创建 store
const store = createStore(reducer);

export default store;

3、在主文件index.tsx全局引入

复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// redux全局参数
import { Provider } from 'react-redux';
import store from './store/store.js';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
	<Provider store={store}>
		<React.StrictMode>
			<App />
		</React.StrictMode>
	</Provider>
);
reportWebVitals();

4、使用

1、在两个tex文件引入使用查看效果

第一个tex文件

复制代码
//引入
import store from '../store/store';

console.log("大得333")
//获得打印
console.log(store.getState().counter)
//修改
store.getState().counter = 6666

第二个文件

复制代码
import store from './store/store';
function dade(){
	// 获取状态
	console.log("大得")
	console.log(store.getState().counter)
	store.getState().counter = 999
	console.log(store.getState().counter)
}
dade()

效果

相关推荐
布兰妮甜6 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia7 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene16 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子25 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
qq_589568102 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~2 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js