React 从 useEffect 中的 Redux 存储中获取状态

Question

从useEffect钩子内的 Redux 存储中获取状态的正确方法是什么？

    useEffect(() => { 
        const user = useSelector(state => state.user);
    });

我正在尝试获取当前状态，useEffect但我无法使用该useSelector调用，因为这会导致错误说明：

Invariant Violation: Hooks can only be called inside the body of a function component.

我想我明白为什么它打破了钩子的主要规则之一。

通过查看Redux 文档上的示例，他们似乎使用一个selectors.js文件来收集当前状态，但mapStateToProps我理解的这个参考不再需要。

我是否需要创建某种应该在useEffect钩子内调用的“getter”函数？

Answer 1

不要忘记添加user作为依赖项，useEffect否则您的效果将不会获得更新值。

const user = useSelector(state => state.user);
useEffect(() => { 
   // do stuff     
}, [user]);

Answer 2

您可以将useSelector其他钩子放在组件的顶部：

const MyComponent = () => {
  ...
  const user = useSelector(state => state.user);
  ...
}

然后你可以user在你的useEffects内部访问。

Answer 3

我发现使用两个 useEffects 对我有用，并且使用 useState 来更新用户（或者在本例中为 currUser）。

const user = useSelector(state=>state.user);
const [currUser, setCurrUser] = useState(user);

useEffect(()=>{
  dispatch(loadUser());
}, [dispatch]);

useEffect(()=>{
  setCurrUser(user);
}, [user]);

您必须使用 currUser 来显示和操作该对象。

Answer 4

你有两个选择。

1 - 如果您只需要一次或“n”次调用 useEffect 时存储的值，并且不想监听 redux 中用户状态可能发生的任何更改，则使用此方法

//import the main store file from where you've used createStore()
import {store} from './store' // this will give you access to redux store

export default function MyComponent(){
   useEffect(() =>{
      const user = store.getState().user;
      //... 
   },[])
}

2 - 如果您想听用户状态可能发生的变化，那么推荐的答案就是解决方法

const MyComponent = () => {
 //...
  const user = useSelector(state => state.user);
  
  useEffect(() => {
    //...
  },[])
 //...
}