在 React Native 中使用 React Hooks 的基本全局状态

Question

我一直在加入 ReactHooks 的潮流，并决定将 React Native 应用程序放在一起，尝试尝试完整的 redux/global 状态实现。我一直在关注一些关于如何去做的文章，但我确实有一些问题。

我理解useState和useReducer的概念，但我被事情的Context方面挂断了。

第一个问题：在不必使用 props 的情况下将状态对象传递到树下的最佳方法是什么？这是我到目前为止所拥有的。通常，如果没有导航，您将有一个接收道具的DispatchContext子组件。但是由于我确实有导航，所以我真的不想将状态传递到树上。我觉得这违背了上下文和钩子的目的。我见过一些value={dispatch}value={{somePieceOfState}}的事情.如何将状态和调度传递到组件树中？

import React, { useReducer } from 'react';
import Navigation from './Navigation';
import { DispatchContext } from './Context';
import { countReducer } from './reducers';
const App = () => {
const [count, dispatchCount] = useReducer(countReducer, 0);
const dispatch = action => [dispatchCount].forEach(fn => fn(action)); //provides one dispatch for the entire component tree
const state = {
count,
//other pieces of state go here
}
return (
<DispatchContext.Provider value={dispatch}>
<Navigation />
// <ChildComponent someStateProp={count} /> normal way to pass down props
</DispatchContext.Provider>
);
};
export default App;

第二个问题：做动作和动作创造者的最佳方式是什么？这大概可以结合第一个问题来回答。这是附加到我的导航的组件。

import React, { useContext } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { DispatchContext } from './Context';
import { countUp, countDown } from './actions';
const Comp1 = () => {
const dispatch = useContext(DispatchContext);
return (
<View>
<TouchableOpacity
onPress={() => dispatch(countUp)}
>
<Text>Up</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => dispatch(countDown)}
>
<Text>Down</Text>
</TouchableOpacity>
</View>
);
};
export default Comp1;

与之关联的操作：

import {
COUNT_UP,
COUNT_DOWN
} from './types';
export const countUp = () => {
return {
type: COUNT_UP
};
};
export const countDown = () => {
return {
type: COUNT_DOWN
};
};

而减速器：

import {
COUNT_UP,
COUNT_DOWN
} from '../actions/types';
export const countReducer = (state, action) => {
console.log(action);
switch (action) {
case COUNT_UP:
return state + 1;
case COUNT_DOWN:
return state - 1;
default:
return state;
}
};

我知道操作和调度以及所有有效的操作，因为我console.log()我的减速器并得到响应。但是当我console.log(action)时，它表明它是函数，动作本身而不是类型。如果我console.log(action.type)，它是未定义的。我在这里做错了什么？

最后一个问题：对于复杂的状态管理，这是一种合理的方法吗？我知道useEffect()之类的东西，但是从任何对钩子有过一些经验的人那里，它对 api 调用和位置跟踪之类的东西有好处吗？这是一种可扩展的方法吗？基本上我要问的是，我不想深入其中，并且必须将所有内容重构为基于类的组件，因为我不能用我需要对类做的钩子做一些事情。但我真的很喜欢这个钩子的东西，我想坚持下去。继续前进好吗？

很抱歉这篇文章很长，但我觉得这些有答案的问题对其他希望与 react native 挂钩的人很有用。

Answer 1

您的错误是您将操作创建者与操作混淆了。顾名思义，操作创建者在调用操作时创建操作。在您的情况下，您正在调度操作创建者，而不是调度操作。必须先调用该函数。

<TouchableOpacity
onPress={() => dispatch(countUp())}
>
// ...
<TouchableOpacity
onPress={() => dispatch(countDown())}
>

在上述返工中，动作创建者在传递给调度之前()被调用。

Answer 2

你可以用这个用 React Hook 编写的小库来简化全局状态管理

yarn add @rawewhat/stora

然后就这样使用它

import useStora from '@rawewhat/stora'
const [states, actions] = useStora()
states.yourState
actions.yourAction()

Answer 3

许多现有的 React 包的全局钩子库都在其中进行 React，或者对其进行修改。

此外，我不喜欢它们似乎都依赖"字符串"作为键的方式，并且缺乏 TypeScript 强类型。

我只是想要一些简单的东西，没有神奇的东西，可能会一直坏掉，或者泄露记忆。

所以我写了自己的。检查来源 - 它非常简单：

https://www.npmjs.com/package/@fluffy-spoon/react-globalize

用法

首先，您需要为您的状态全局创建一个键，并带有可选的初始值。

//users.ts
import { createGlobal } from '@fluffy-spoon/react-globalize';
export const usersKey = createGlobal([{ firstName: "John", lastName: "Doe" }]);

然后，您可以简单地在其中一个组件中使用它，就像使用useState一样！

//index.ts
import { usersKey } from './users';
export const GlobalUserListComponent = () => {
//users and setUsers behaves like useState, except they are now shared between all components!
const [users, setUsers] = useGlobal(usersKey);
...
}