小编ish*_*ala的帖子

我是Promises和React的新手.我在我的动作创建者中使用redux-thunk来解决promises,我正在调用我的组件中的动作创建器.在成功或不成功的请求完成后,如何路由到不同的URL？我正在附加删除功能动作创建者的代码.

成功时,我应该在发送时使用参数(routeTo)设置状态吗？

这是删除功能:

export function deletePost(id){
    var request = axios.delete(`${ROOT_URL}posts/${id}${API_KEY}`);

    return function(dispatch){
        request.then((response)=>{
            console.log("I deleted"+response.data.title);
        }).catch((error)=>{
            console.log("DELETE_ERROR: "+JSON.stringify(error));
        });
    }
}

我从我的组件中的onclick函数调用此函数.

deletePost(){
    this.props.deletePost(this.props.params.id);
}

我有一个登录模式.我使用动作创建器在减速器中转换isLoginModalVisible: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动作创建者确实被击中但它没有派遣到减速器.

这是showLoginModal动作创建者:

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

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

编辑:

我的reducer的一部分.它确实有效,因为这是我显示登录模式的方式.当我想隐藏它时,我传递假.有效载荷也没有问题.当我通过另一个动作创建者调用它时,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;

CombineReducers:

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: …

我是 React 和 Redux 的新手，一直以来，我都将我所有的动作创建者和常量放在一个文件“../actions/index.js”中。当我开始时，这看起来不错，但现在，它变成了一大块不可读的代码。

您是否建议将 index.js 分解为functional1.js、func2.js、func3.js，然后根据需要从拆分的文件中导入操作：

import {sampleAction} from '../action/func1';

或者有没有更好的方法来做到这一点？

对不起，如果这似乎是一个愚蠢的问题。我仍在尝试了解 React-Redux 应用程序中的最佳实践。