RN 中使用 React-Redux

最新推荐文章于 2023-08-19 10:40:02 发布

赵sir来了

最新推荐文章于 2023-08-19 10:40:02 发布

阅读量582

点赞数 1

本文链接：https://blog.csdn.net/qq_43389371/article/details/103230716

版权

在React Native (RN)中使用React-Redux与React应用中的方式基本相同，通过在根组件中包裹store，利用connect将mapStateToProps和mapDispatchToProps绑定到组件。本文展示了从设置store到创建action和reducer的完整流程，并提供了实际操作的例子，如在Add和AlterColor页面中展示和修改store数据。

摘要由CSDN通过智能技术生成

在 RN 中如何使用 React-Redux

其实，在 RN 中使用 React-Redux 和 React 中类似，可以说一模一样

都是在根元素中使用，<Provider>来包裹根组件，导入 store，将 store 挂载在 Provider 上。

代码的结构：

.
├── src                       # 程序源文件夹         
│   ├── pages                 # 主要的页面，文件夹
│   ├── navigation            # 页面的导航，文件夹
│   ├── redux              	  # redux，文件夹
│   └── App.js				  # 根组件，文件
└── index.js             	  # 程序入口文件

index.js 代码：

import {
   AppRegistry} from 'react-native';
import App from './src/App';
import {
   name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js 代码：

import React, {
   Component} from 'react';
import store from './redux/store';
import AppNavigation from './navigation/AppNavigation';
import {
   Provider} from 'react-redux';

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

其中 AppNavigation 是导航（react-navigation）

AppNavigation.js 代码：

import {
   createAppContainer} from 'react-navigation';
import {
   
  createStackNavigator,
  StackViewStyleInterpolator,	// 这个是一个页面的弹出的方向，安卓默认是从下到上，这个就将方向改为从左往右
} from 'react-navigation-stack';

import Book from '../pages/';	// 如果你的文件名为 index.js 会默认加载这个文件
import Add from '../pages/otherPage/add';
import AlterColor from '../pages/otherPage/alterColor';

const stack = createStackNavigator(
  {
   
    Book: {
   
      screen: Book,
      navigationOptions: {
   
        header: null,
      },
    },
    Add: {
   
      screen: Add,
    },
    AlterColor: {
   
      screen: AlterColor,
    },
  },
  {
   
    transitionConfig: () => ({
   
      screenInterpolator: StackViewStyleInterpolator.forHorizontal,
    }),
  },
);

export default createAppCon