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()

效果

相关推荐
良木林18 分钟前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺7 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课10 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登11 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我11 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper11 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳12 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱12 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design