React-Native集成dva.js

dvajs做为一个基于redux的状态管理框架,在react中的表现仍是很不错的,若是咱们想要在react-native应用中使用dvajs该怎么作呢?react

首先安装dva-corereact-reduxgit

npm i -S dva-core react-redux

 

dva-coredvajs的核心部分,可以很好的和其余react-native组件在一块儿工做。github

dva-coredva在提供的方法上有一些区别,不过在使用思路上是彻底同样的。因为基本没有什么难点,这里就直接贴代码了。typescript

如下是一个react-navigation3.x结合dva-core的一个配置实例:npm

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-templateredux

相关文章
相关标签/搜索