react native整合dva实现一个简单的点击按钮改变hello,world

效果:

一个简单的效果让我们理清楚react-native整合dva的来龙去脉。
修改package.json,添加依赖

"dva-core": "^1.4.0",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-navigation": "^4.4.4",
    "react-navigation-redux-helpers": "^4.0.1",
    "react-redux": "5.0.7",
    "redux": "3.7.2",
    "redux-thunk": "^2.3.0"

同时添加

"@babel/plugin-proposal-decorators": "^7.1.6",

修改babel.config.js

"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]

创建model文件，一个返回hello,world:
/src/models/test.js

export default {
    namespace: "test",
    state: {
       words:"hello,world"
    },

    effects: {
        *changewords({ payload, callback }, { call, put }) {
            yield put({
                type: "_changewords",
                payload: {words: "hello,lalala..."}
            });
            if (callback) callback(response);
        },
     
    },
    reducers: {
        _changewords(state, action) {
            return {
                ...state,
                ...action.payload
            };
        }
    }
};

创建一个index文件可以引入所有的model，我们这里就写了一个
/src/models/index.js

import TestModel from './test'

export default [
    TestModel,
]

入口文件代码如下:

import React, { Component } from 'react';
import dva from './utils/dva'
import App from "./containers/index";
import models from './models'


const app = dva({
    initialState: {},
    models,
    onError(e) {
        console.log('onError', e)
    },
})

export const store = app._store

export default app.start(<App />)

/src/utils/dva.js

import React from 'react';
import { create } from 'dva-core';
import { Provider, connect } from 'react-redux';

export { connect };

export default (options) => {
  const app = create(options);
  
  if (!global.registered) options.models.forEach(model => app.model(model));
  global.registered = true;

  app.start();
  
  const store = app._store;

  app.start = container => () => (
    <Provider store={store}>
      {container}
    </Provider>
  );

  app.getStore = () => store;

  return app;
}

根组件代码如下:

import React, { Component } from "react";
import {View,Text,Button} from 'react-native';
import { connect } from "react-redux";

@connect(({ test}) => ({
    words: test.words
}))
export default class App extends Component {
        componentDidMount() {
        console.log("##########"); 
    }
    change=()=>{
        const {dispatch}=this.props
        dispatch({
            type: "test/changewords"
        })
    }
    

    render() {
         const { words} = this.props;
        return (
            <View>
                    <Text>{words}</Text>
                <Button onPress={this.change} title="点击改变"/>
            </View>
        );
    };
}