javascript - 如何在 react 中对待全局用户/用户数据？

Question

我正在构建一个 ReactJS 项目，我正在使用类似这样的东西，通过应用程序提供用户数据:

function Comp1() {
  const [user, setUser] = useState({});

  firebase.auth().onAuthStateChanged(function (_user) {
    if (_user) {
      // User is signed in.
      // do some firestroe queryes to get all the user's data
      setUser(_user);
    } else {
      setUser({ exists: false });
    }
  });

  return (
    <div>
      <UserProvider.Provider value={{user, setUser}}>
        <Comp2 />
        <Comp3 />
      </UserProvider.Provider>

    </div>
  );
}

function Comp2(props) {
  const { user, setUser } = useContext(UserProvider);
  return (
    <div>
      {user.exists}
    </div>
  )
}

function Comp3(props) {
  const { user, setUser } = useContext(UserProvider);
  return (
    <div>
      {user.exists}
    </div>
  )
}

//User Provider

import React from 'react';

const UserProvider = React.createContext();
export default UserProvider;

因此，在这种情况下，Comp1 向 Comp2 和 Comp3 提供用户数据。唯一的问题是当用户状态改变或页面加载时，它会创建一个无限循环。如果我没有使用 useState 来存储用户数据，那么当它发生变化时，组件不会被重新渲染。我也尝试在 index.js 文件中做这样的事情:

firebase.auth().onAuthStateChanged(function (user) {
  if (user) {
     ReactDOM.render(<Comp1 user={user} />, document.getElementById('root'));
  } else { 
     ReactDOM.render(<Comp1 user={{exists: false}} />, document.getElementById('root'));
  }
});

但这有时会有点奇怪，而且有点困惑。有哪些解决方案？谢谢。

Edit: I'm triening to do it in the wrong way? How should I provide all user data with only one firebase query?

Answer 1

我建议为应用程序使用一些状态容器，以便用户轻松操作。最常见的解决方案是使用 Redux。使用 redux，您将能够拥有应用程序的全局状态。通常，所有用户数据都存储在其中。 https://redux.js.org/另一种解决方案是使用具有简单存储访问权限的 MobX。如果您不喜欢它，它不会使用 Flux 模式。如果您不想使用全局存储，您可以使用 HOCs 来传播您的用户数据。最后，您可以使用 Context 来 React，但这是一种糟糕的方法。

例如，让我们选择最流行的 Flux 架构代表 - Redux。

第一层是View层。在这里，我们将调度一些操作来更改全局，例如用户数据。

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' 
import { logIn, logOut } from 'actions'

export default class Page extends React.Component {
  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      logIn(user)
    } else {
      logOut()
   })
  }, [])

  render () {
    ...
  }
}

const mapDispatchToProps = dispatch => bindActionCreators({
  logIn,
  logOut
}, dispatch)

export default connect(null, mapDispatchToProps)(App)

第二层是 Action 。在这里，我们处理我们的数据，使用 api、格式状态等。 Action 的主要目标是创建数据以将其传递给 reducer 。

Action .js

export const logIn = user => dispatch => {
  // dispatch action to change global state    
  dispatch({
    type: 'LOG_IN',
    payload: user
  })
}

export const logOut = user => dispatch => {
  dispatch({ type: 'LOG_OUT' })
}

最后一件事是 reducer 。他们的唯一目标是改变状态。我们在这里订阅一些 Action 。 Reducer 始终应该是一个纯函数。状态不应该被改变，只能被覆盖。

appReducer.js

const initialState = {
 user: null
}

export default function appReducer (state = initialState, action) {
   const { type, payload } = action
   switch(type) {
     case 'LOG_IN':
       return {
          ...state,
          user: payload
       }
     case: 'LOG_OUT':
       return {
          ...state,
          user: null
       }
   }
}

然后，我们可以随时使用全局应用程序状态。为此，我们应该使用 react-redux 库和 Provider HOC

const App = () =>
  <Provider store={store}>
     <Navigation /> 
  </Provider>

现在，我们可以通过 react-redux connect HOF 访问任何组件内的任何商店。它与内部的 React Context API 配合使用。

const Page2 = ({ user }) => {
   //... manipulate with user
}

// this function gets all stores that you have in the Provider.
const mapStateToProps = (state) => {
  user: state.user
}


export default connect(mapStateToProps)(Page2)

顺便说一下，你应该选择中间件来处理 redux 中的异步代码。我的示例中使用的最流行的是 redux-thunk。您可以在官方文档中找到更多信息。在那里您可以找到有关如何进行初始商店配置的信息