React-Native集成dva.js

Z时代
2024-01-10
分类：综合

react

dvajs作为一个基于redux的状态管理框架，在react中的表现还是很不错的，如果我们想要在react-native应用中使用dvajs该怎么做呢？

首先安装dva-core和react-redux：

npm i -S dva-core react-redux

dva-core是dvajs的核心部分，能够很好的和其他react-native组件在一起工作。

dva-core和dva在提供的方法上有一些区别，不过在使用思路上是完全一样的。由于基本没有什么难点，这里就直接贴代码了。

以下是一个react-navigation3.x结合dva-core的一个配置实例：

import * as React from 'react';
import {
  createAppContainer,
  createBottomTabNavigator,
} from 'react-navigation';
import Index from './Index';
import Home from './pages/Home';
import Cart from './pages/Cart';
import { Provider } from 'react-redux';
import { create } from 'dva-core';
const indexModel = {
  namespace: 'index',
  state: { count: 1 },
  effects: {},
  reducers: {
    edit(state, { count }) {
      state.count += count;
      return { ...state };
    },
  },
};
const models = [indexModel];
const app = create(); // 创建dva实例，可传递配置参数。https://dvajs.com/api/#app-dva-opts
models.forEach((o) => { // 装载models对象
  app.model(o);
});
app.start(); // 实例初始化
const store = app._store; // 获取redux的store对象供react-redux使用
const appNavigator = createBottomTabNavigator({
  Index,
  Home,
  Cart,
});
const App = createAppContainer(appNavigator);
export default class Container extends React.Component {
  public render() {
    return (
      <Provider store={store}>
        <App/>
      </Provider>
    );
  }
}