React 第三方状态管理库相关 -- Redux & MobX 篇

一、redux

首先安装依赖:

javascript 复制代码
npm install redux react-redux @reduxjs/toolkit

示例代码:

javascript 复制代码
// src/store/index.js
import { configureStore } from '@reduxjs/toolkit'
import couterSlice from './couterSlice'

const store  = configureStore({
    reducer:{
        couterSlice
    }
})

export default store
javascript 复制代码
// src/store/couterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const couterSlice = createSlice({
    name:'couterSlice',
    initialState:{ count: 0 },
    reducers:{
        increment: (state) => { state.count++ },
        decrement: (state) => { state.count++ }
    },
    extraReducers:(builder) => { }
})
export const { increment,decrement } = couterSlice.actions
export default couterSlice.reducer
javascript 复制代码
// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { Provider } from 'react-redux'
import store from '@/store'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
)

具体使用示例:

javascript 复制代码
// src/App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { increment } from '@/store/couterSlice.js'

function App() {
  const [count, setCount] = useState(0)
  const dispatch = useDispatch()
  const counter = useSelector((state) => state.couterSlice)
  console.log(counter);
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => dispatch(increment())}>
          count is {counter.count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

持久化存储参考: react-redux 数据持久化-CSDN博客

二、MobX

首先安装依赖:

javascript 复制代码
npm install mobx mobx-react-lite

示例代码:

javascript 复制代码
// src/store/index.js
import React from 'react'
import counter from './counterStore'

class RootStore {
    constructor() {
        this.counterStore = counter
    }
}

const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useStore = () => React.useContext(context)
export { useStore }
javascript 复制代码
// src/store/counterStore.js
import { makeAutoObservable } from 'mobx'

class CounterStore {
    count = 0
    constructor() {
        makeAutoObservable(this)
    }
    addCount = () => {
        this.count++
    }
    get Count() {
        return this.count
    }
}

const counter = new CounterStore()
export default counter
javascript 复制代码
// src/App.jsx
import { observer } from 'mobx-react-lite'
import { useStore } from './store'
function App() {
  const store = useStore()
  return (
    <div className="App">
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>
    </div>
  )
}
export default observer(App)
相关推荐
懒大王95272 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
陈皮话梅糖@4 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~8 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克8 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道8 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维8 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久8 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain8 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏9 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing9 小时前
React-Markdown详解
前端·react.js·前端框架