React和Vite集成Dva.js

React和Vite集成Dva.js

Dva是比较好用的状态管理工具，官方案例是脚手架模板，不方便用来参考集成现有项目，于是写个极简案例记录一下，帮助用户3分钟就能学会配置。

案例分为以下4步：

1.安装dva

// 安装
yarn add dva dva-core react-redux

2.配置models

// models/global.js
export default {
    // model名称
    namespace: 'global',
    // model变量
    state: {
        count: 0
    },
    // 异步函数
    effects: {
        // * getData({ params }, { put, call }) {
        // const res = yield api.getData(params)
        // if (res && res.status === 200) {
        //     return res.data || {}
        // } else {
        //     return {};
        // }
        // },
    },
    // 同步函数
    reducers: {
        saveGlobalState(state, { params }) {
            return { ...state, ...params };
        },
    },
};

// models/index.js
import { create } from 'dva-core';
import global from './global';
import user from './user'; // 与global类似

// 初始化app和models
const models = [global, user];
const app = create();
models.forEach(item => app.model(item));
app.start();

// 返回store
const store = app._store;
export default store;

3.挂载models

// main.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App.jsx';
import store from './models';
import './index.css';

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

4.使用models

// 组件使用
import { useSelector, useDispatch } from 'react-redux';
import './App.css'

function App() {
  const { count } = useSelector((state) => state.global);
  const dispatch = useDispatch();
  return (
    <>
      <div>{count}</div>
      <button
        onClick={() => {
          dispatch({
            type: 'global/saveGlobalState',
            params: { count: count + 1 }
          });
        }}
      >
        add
      </button>
    </>
  )
}

export default App