javascript - 在 react-redux 中调用失败和成功操作的好地方在哪里

Question

我有一个关于 redux 的问题。

现在，我正在按照 redux advanced tutorial 构建我的移动应用程序.

教程说您必须为每个功能创建 3 个操作，因此我为登录功能创建了 3 个操作，如下所示:

requestSignIn
requestSignInSuccess
requestSignInFailure

但是，我不明白应用应该从哪里调用它们。

现在，在我的应用中，应用在 requestSignIn 中调用 requestSignInSuccess 和 requestSignInFailure。

这是我的操作代码:

export const REQUEST_SIGN_IN = 'REQUEST_SIGN_IN';
export const REQUEST_SIGN_IN_FAILURE = 'REQUEST_SIGN_IN_FAILURE';
export const REQUEST_SIGN_IN_SUCCESS = 'REQUEST_SIGN_IN_SUCCESS';

import firebase from 'react-native-firebase';

export function requestSignIn() {
  // start sign in function
  firebase.auth().signInWithEmailAndPassword(EMAIL, PASSWORD)
    .then(response => {
      // success, so call requestSignInSuccess() to change state
      requestSignInSuccess(response.user);
    })
    .catch(error => {
      // fail, so call requestSignInFailure() to change state
      requestSignInFailure(error);
    })

}

function requestSignInSuccess(user) {
  // save user info into state in reducer
  return {
    type: 'REQUEST_SIGN_IN_SUCCESS'
    payload: user
  }
}

function requestSignInFailure(error) {
  // save error message into state in reducer
  return {
    type: 'REQUEST_SIGN_IN_FAILURE'
    payload: error
  }
}

[问题]

• 我是否正确遵循了 redux 教程？ (app在requestSignIn函数中调用了requestSignInFailure和requestSignInSuccess，好不好？)
• 如果我希望应用程序将 isLoading 标志设置为状态，哪个操作应该更改标志？

Answer 1

让我试着一一回答你的问题。

Am I following the redux tutorial correctly?

是的，您走在正确的轨道上，只差几步。以下解释适用于基于类的组件。

从技术上讲，如果您创建了操作 - 就像上面的问题一样 - 那么您需要做的是在组件中分派(dispatch)它们以便使用。

1. 首先需要调度mapDispatchToProps中的action。
2. 然后需要连接组件 - 调用 requestSignIn 操作 - 与 Redux 商店。
3. 将创建的 mapDispatchToProps 作为第二个参数传递给连接。

请在下面找到以下示例:

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// ... other imports

class YourComponent extends React.Component {
     constructor (props) {
         super(props);
     }

     // ... component code
     // ... obviously this is just an example component for representation

     render() {
         return (
             <>
                 <a onClick={props.requestSignIn()}>Request Sign In</a>
             </>
         )
     }
}

const mapDispatchToProps = dispatch => {
    return bindActionCreators({ requestSignIn }, dispatch);
};


export default connect(null, mapDispatchToProps)(YourComponent);

If I want the app to have isLoading flag into state, which action should change the flag?

我会在 reducer 中创建一个名为 isLoading 的新属性，如下所示:

const initialState = {
    isLoading: false,
};

export default (state=initialState, action) => {
    switch(action.type) {
         case 'ENABLE_LOADING':
              return {
                   ...state,
                   isLoading: true,
              };

         case 'REQUEST_SIGN_IN_SUCCESS':
              return {
                   ...state,
                   isLoading: false,
              };

         case 'REQUEST_SIGN_IN_FAILURE':
              return {
                   ...state,
                   isLoading: false,
              };

         // ... other actions
    }
}

在您的 requestSignIn 操作中，一旦您开始在 firebase.auth().signInWithEmailAndPassword(EMAIL, PASSWORD) 那么它希望对你有用。就像您对 REQUEST_SIGN_IN_SUCCESS 和 REQUEST_SIGN_IN_FAILURE 所做的那样。

要访问 reducer 的属性，您需要进一步使用 mapStateToProps。

在功能组件的情况下，您需要使用 useDispatch 来调用创建的操作:

This hook returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

要访问存储中的数据，有一个名为 useSelector 的钩子(Hook):

Allows you to extract data from the Redux store state, using a selector function.

快速总结:

如果您正在寻找功能组件中使用 useSelector 和 useDispatch 的完整示例，那么请查看此 git 存储库:

https://github.com/norbitrial/react-redux-loading-data-example

在存储库中，您会找到一个很好的假 API 调用表示，它使用加载器指示器将数据加载到表中，就像您从问题中需要的一样。

如果对更多细节感兴趣，请找到以下非常有用的链接:

1. > Connect: Dispatching Actions with mapDispatchToProps
2. > Connect: Extracting Data with mapStateToProps
3. > Dispatching actions with useDispatch() for functional component
4. > Extract data with useSelector() for functional component

希望这对您有所帮助，如果您需要进一步说明，请告诉我。