React-Native集成dva.js

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>
    );
  }
}

 

 

本文代碼:https://github.com/axel10/react-native-dva-typescript-template