React Native 使用Redux全局共享state

一直想将项目中使用的redux,写成一篇博客,但是又碍于对Redux的掌握能力有限,只能在项目完结的时候,稍稍整理一下redux在项目中全局获取 用户的信息,从用户登录,到修改用户信息,和退出登录全局使用Redux进行保存用户信息,修改用户信息,清空用户信息,一套小小的入门代码。
项目中redux基于react-navigation,可做到:

  1. 某个组件的状态,需要全局共享
  2. 某个状态需要在任何地方都可以拿到
  3. 一个组件需要改变全局状态
  4. 一个组件需要改变另一个组件的状态

由于项目篇幅涉及的可能会比较多,简单的一些操作,这里不做教程

1、我们要npm一下redux的相关组件
redux、react-redux 、redux-actions、redux-thunk
2、当然不能少了 react-navigation

1、项目中iOS和android,我们注册导出的根组件为Root

import {
    AppRegistry,
} from 'react-native';
import Root from './shop/Root';

AppRegistry.registerComponent('ReactNative', () => Root);

2、在Root.js中

import {AppStack} from './Router' // 路由栈(使用react-navigation封装出来的路由栈)
import {Provider} from 'react-redux';
import configureStore from './redux/Store'
const store = configureStore({});

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

3、此时我们创建一个redux文件夹,里面包含Reducer,Action,Store

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
Action 是一个对象
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

文件夹如下图:
这里写图片描述

4、我们先创建一个ActionTypeConf.js

// 用户信息
export const USER_INFO_GET_LOCAL = 'USER_INFO_GET_LOCAL';  // 获取本地用户信息
export const EDIT_USER = 'EDIT_USER'; // 编辑用户信息
export const USER_CLEAR = 'USER_CLEAR'; // 清空用户信息

5、创建User.js

import * 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-redux-router是一个用于在React Native应用中管理路由和状态的库。它结合了React NativeReduxReact Navigation,提供了一种方便的方式来处理应用程序的导航和状态管理。 下面是一个简单的示例,演示了如何在React Native应用中使用react-native-redux-router: 1. 首先,安装所需的依赖项。在终端中运行以下命令: ```shell npm install react-native react-redux redux react-navigation react-native-router-flux --save ``` 2. 创建一个Redux store,并将其与React Native应用程序的根组件连接起来。在App.js文件中,添加以下代码: ```javascript import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import rootReducer from './reducers'; import AppNavigator from './navigation/AppNavigator'; const store = createStore(rootReducer); export default function App() { return ( <Provider store={store}> <AppNavigator /> </Provider> ); } ``` 3. 创建一个导航器组件,并定义应用程序的导航结构。在navigation/AppNavigator.js文件中,添加以下代码: ```javascript import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { Actions } from 'react-native-router-flux'; import HomeScreen from '../screens/HomeScreen'; import DetailsScreen from '../screens/DetailsScreen'; const MainNavigator = createStackNavigator({ Home: { screen: HomeScreen }, Details: { screen: DetailsScreen }, }); const AppNavigator = createAppContainer(MainNavigator); const mapStateToProps = state => ({ // 将Redux状态映射到导航器组件的props中 }); const mapDispatchToProps = dispatch => bindActionCreators(Actions, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(AppNavigator); ``` 4. 创建屏幕组件,并在其中使用导航和Redux状态。在screens/HomeScreen.js文件中,添加以下代码: ```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import { Actions } from 'react-native-router-flux'; const HomeScreen = () => { return ( <View> <Text>Welcome to the Home Screen!</Text> <Button title="Go to Details" onPress={() => Actions.details()} /> </View> ); } export default HomeScreen; ``` 5. 创建其他屏幕组件,并在其中使用导航和Redux状态。在screens/DetailsScreen.js文件中,添加以下代码: ```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import { Actions } from 'react-native-router-flux'; const DetailsScreen = () => { return ( <View> <Text>Welcome to the Details Screen!</Text> <Button title="Go back" onPress={() => Actions.pop()} /> </View> ); } export default DetailsScreen; ``` 这是一个简单的示例,演示了如何在React Native应用中使用react-native-redux-router来管理路由和状态。你可以根据自己的需求进行扩展和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值