我正在开发一个 React Native 应用程序。
我想保存登录人员的用户 ID，然后检查用户是否在每个组件中都已登录。
所以我要找的是 cookie、会话或全局状态之类的东西。
我读过我应该使用 Redux，但这似乎过于复杂，而且很难让它与react-navigation. 它迫使我为几乎所有东西定义动作和减速器，尽管我唯一想要的是能够访问所有组件中的单个全局状态/变量。
有没有其他选择，或者我真的应该重新构建我的整个应用程序以使用 Redux？
React Native 中的全局状态
IT技术
javascript
reactjs
react-native
redux
react-redux
2021-04-13 06:50:02
6个回答
我通常创建一个 global.js 包含：
module.exports = {
screen1: null,
};
并获取屏幕上状态的值
import GLOBAL from './global.js'
constructor() {
GLOBAL.screen1 = this;
}
现在你可以像这样在任何地方使用它：
GLOBAL.screen1.setState({
var: value
});
自 React 16.8.0（2019 年 2 月 6 日）以来的更新引入了 Hooks。
使用外部库（如Mobx或）不是强制性的Redux。（在介绍 Hook 之前，我使用了这两种状态管理解决方案）
您只需使用 10 行Source即可创建全局状态
import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();
export const StateProvider = ({reducer, initialState, children}) =>(
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
使用全局状态扩展您的应用程序：
import { StateProvider } from '../state';
const App = () => {
const initialState = {
theme: { primary: 'green' }
};
const reducer = (state, action) => {
switch (action.type) {
case 'changeTheme':
return {
...state,
theme: action.newTheme
};
default:
return state;
}
};
return (
<StateProvider initialState={initialState} reducer={reducer}>
// App content ...
</StateProvider>
);
}
有关详细说明，我建议阅读这个精彩的媒体
在状态管理方面，有一些Redux 的替代方案。我建议你看看 Jumpsuit 和 Mobx。但是不要指望它们比 Redux 更容易。状态管理主要是一件神奇的事情，大部分小发明都发生在幕后。
但是无论如何，如果您觉得需要一些全局状态管理，那么无论是 Redux 还是 Mobx 等，都值得花时间掌握其中一种解决方案。我不建议AsyncStorage为此目的使用任何 hacky。
我通常做这样的全局变量：
我创建了一个 globals.js
module.exports = {
USERNAME: '',
};
类似的东西来存储用户名然后你只需要导入：
GLOBAL = require('./globals');
如果您想存储数据，假设您想保存用户名，只需执行以下操作：
var username = 'test';
GLOBAL.USERNAME = username;
好了，你只需要在你想要的页面上导入 GLOBAL 并使用它，只需使用if (GLOBAL.username == 'teste').
如果您不熟悉（像我一样）并且对第一个答案感到困惑。首先，使用一个组件类
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
walk: true
};
GLOBAL.screen1 = this;
}
render() {
return (
<NavigationContainer>
<Stack.Navigator>
{this.state.walk ? (
<>
<Stack.Screen name="WalkThrough" component={WalkThroughScreen} />
</>
) : (
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
<StatusBar style="auto" />
</NavigationContainer>
)
}
然后你可以在任何其他组件中做（我的组件在 /components 上，全局在 root 上）：
import GLOBAL from '../global.js'
GLOBAL.screen1.setState({walk:false})