在react-native中使用dva状态管理 2020最新版本超简单

在react-native中使用dva状态管理 2020最新版本超简单

网上看了很多教程，使用redux就不必多说了，很复杂也很繁琐。而dva集成了redux，redux-saga等，使用起来十分便捷，但是网上有关react-native中使用dva的教程，有的很也繁琐，有的版本太老不适用于目前的react-native版本。
所以，这里介绍一个超级简单且快速的 引入dva状态管理的方法。只要三个步骤。

1. 安装dva-core-ts，react-redux。

npm i dva-core-ts react-redux

我这里因为使用了typescript编写代码，因此使用的dva-core-ts，当然你用js的话就安装dva-core就行了

npm i dva-core react-redux

创建新文件root.jsx/root.tsx，这里你也可以不创建新文件，把代码写在App.tsx/App.jsx中，反正只要创建dva实例，装载models，获取redux中的store对象，并使用 Provider 来包裹你的App.tsx/App.jsx，为根组件添加store 就行。

import * as React from 'react';
import indexModel from './models/index';
import {Provider} from 'react-redux';
import App from './App'; 

import {create} from 'dva-core-ts';

const models = [indexModel];

const app = create(); 

models.forEach((o) => {
  // 装载models对象
  app.model(o);
});

app.start(); // 实例初始化

const store = app._store; // 获取redux的store对象供react-redux使用

export default class Container extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <App />
      </Provider>
    );
  }
}

2. 新建models文件夹，再在文件夹中新建文件index.ts，什么命名都可以，这个写法就跟正常的dva一样，写一个model

export default {
    namespace: 'user',
    state: {
        name:'123'
    },
    effects: {
    },
    reducers: {
    },
};

3.最后在需要使用数据的组件上connect一下
这里PersonalCenter就是需要数据的组件，你可以换成自己的组件

import React from 'react';
import {connect} from 'react-redux';

interface PersonalCenterProps {
  user: any;
}

const PersonalCenter = (props: PersonalCenterProps) => {
  return (
    <ScrollView style={{flex: 1}}>
    <View>
		<Text>{props.user.name}</Text>
	</View>
    </ScrollView>
  );
};

export default connect((state: any) => ({user: state.user}))(PersonalCenter);