reactjs - 无法在 React-Redux 应用程序中调用另一个操作

Question

我有一个登录模式。我使用 Action 创建器在 reducer 中将 isLoginModalVisible: true 变为 true 。在容器内、组件的 onClick 内调用操作创建者，如下所示:

<TextButtonRight onClick={()=> this.props.showLoginModal(true)}> 

在登录模式内，我有一个用于提交表单的登录按钮。我希望模态在 200OK 时消失，否则，我会在模态中显示错误消息。单击登录按钮调用此操作创建者:

export function logInUser(){
    console.log("Actions--> logInUser");
    //Imagine I got a 200OK
    dispatch(showLoginModal(false));

    return({
        type: UPDATE_USER_LOGGED_IN,
        payload: true
    });
}

我正在调用操作创建者以向 logInUser 操作创建者隐藏模式，但它不起作用。 showLoginModal 操作创建者确实受到攻击，但它不会分派(dispatch)到 reducer 。

这是 showLoginModal 操作创建者:

export function showLoginModal(bool){
    console.log("Actions--> showLoginModal:"+bool);
    return({
        type: UPDATE_LOGIN_MODAL_VISIBLE,
        payload: bool
    });
}

(如果我犯了菜鸟错误，我很抱歉)

编辑:

我的 reducer 的一部分。它确实有效，因为这就是我显示登录模式的方式。当我想隐藏它时，我会传递 false 。负载也没有问题。当我通过另一个操作创建者调用 console.log 时，它没有被获取。当我以这种方式将其传递给 onClick 提交按钮时工作正常: onClick={()=> this.props.showLoginModal(false)}

case UPDATE_LOGIN_MODAL_VISIBLE:
            console.log("REDUCER-->"+UPDATE_LOGIN_MODAL_VISIBLE);
            return {...state, loginModalVisible: action.payload};
            break;

组合 reducer :

const rootReducer = combineReducers({
    posts: postsReducer, 
    displayComps: displayComponentsReducer,
    form: formReducer,
    searchForm: searchFormReducer
});

编辑2:

抱歉，我应该提到我正在使用 thunk。我想知道是否有一种方法可以调用此操作，如下所示:

req.then((response)=>{
    console.log("REQ_COMPLETE");
    dispatch({type: UPDATE_USER_LOGGED_IN, payload: true});
    //like so:
    showLoginModal(false);
    localStorage.setItem('userLoggedIn', true);
 })

而不是添加这个:

dispatch({type: UPDATE_LOGIN_MODAL_VISIBLE, payload: false});

从另一个 Action 创建者处分派(dispatch) Action 似乎有点老套。

Answer 1

澄清一些术语可能会有所帮助。如果这是您已经知道的内容，请提前致歉。

当您想要使用 redux-thunk 分派(dispatch)多个操作时，您可以分派(dispatch)一个操作。这是一种常见的模式。看起来您的 logInUser() 函数是一个操作。有关规范示例，请参阅 fetchPostsIfNeeded() in Dan Abramov's documentation here .

Action 创建者只是返回一个对象并且不执行任何操作。 操作执行一些操作(通常是异步的)，然后分派(dispatch)操作，这些操作通常通过调用操作创建者来构建。从操作中分派(dispatch)操作没有什么技巧。

但是，不建议从操作创建者调用任何函数。操作创建者应该返回一个简单的对象并且没有副作用，就像您的 showLoginModal() 函数一样。请注意，调用操作创建器和手动创建对象之间没有行为差异。所以这样做:

var action = { 类型:UPDATE_LOGIN_MODAL_VISIBLE，负载:false }

与

相同

var action = showLoginModal(false)

需要注意的是:这两段代码都没有任何作用!他们创建一个对象但不将其用于任何用途。在您dispatch(action)之前，您的应用中不会发生任何事情。

Action 创建者和操作都必须经过dispatch()ed。

• 必须分派(dispatch)该操作，因为这是其内部函数如何传递 dispatch 函数变量的方式，而该变量又用于分派(dispatch)操作。
• 必须分派(dispatch)操作，因为它们没有自己的功能；它们只是简单的物体。只有当它们被分派(dispatch)到 Redux store 时，它​​们才会影响 store 状态。

看起来你的这段代码正在调用一个 Action 创建者，但没有调度它:

showLoginModal(false);

将其更改为

dispatch(showLoginModal(false));

可能会解决您的问题。

以某种方式命名 Action 创建者会很有帮助，这样可以帮助任何阅读代码的人(包括您)看到/记住他们只是创建了一个 Action 。例如，您可以将 showLoginModal 重命名为 showLoginModalAction 甚至 createShowLoginModalAction。

logInUser() 函数是一个操作(因为它调度一个操作)，但没有明确的原因，它也会返回一个操作。它返回的操作永远不会分派(dispatch)到商店，至少在发布的代码中是如此，因此它不会产生任何效果。也许您的意图是将该操作分派(dispatch)到商店，那么为什么不直接分派(dispatch)它呢？

logInUser(){
  dispatch( sendingLoginRequestAction() );
  someAsyncLoginFuncThatReturnsAPromise(userName, password)
  .then(result=>{
    dispatch( loginSucceededAction(result) );
    dispatch( hideLoginModalAction() );
  });
}

那些 Action 创建者看起来像:

sendingLoginRequestAction() { return { type: UPDATE_SENDING_LOGIN_REQUEST }; } // You don't have anything like this, but it could be used to show a Waiting animation

loginSucceededAction() { return { type: UPDATE_USER_LOGGED_IN, payload: true }; }

hideDialogModalAction { return { type: UPDATE_LOGIN_MODAL_VISIBLE, payload: false }; }

这有帮助吗？