行动不派遣

Question

当我运行一个动作创建者创建我的 thunk 时，它没有运行调度功能。

为了测试，我在我的根组件的渲染方法中放了一个按钮，我的根组件就这样连接了（删除了无关的东西）：

import { loadAndSetCurrentUser } from '../Actions/SedFF';
import { setSysMenuExpand, setNavMenuExpand, setLoginDialogVisibility } from '../Actions/UI';

render() {
    return (
        <button onClick={() => 
            loadAndSetCurrentUser("username@email.com")}>LASCU</button>
    )
}

const mapStateToProps = function (state) {
    return {
        UI: state.UI,
        sedff: state.SedFF,
    }
}

const mapDispatchToProps = {
    loadAndSetCurrentUser,
}


export default withStyles(styles, { withTheme: true })(withRouter(connect(mapStateToProps, mapDispatchToProps)(WebFF)));

我的 Actions Creators 文件如下所示：

export function loadAndSetCurrentUser(username) {
    console.log("LASCU: " + username);
    return (dispatch, getState) => {
        console.log("in dispatch");
        dispatch(this.requestingUserData(username)); 

        const user = getState().Users[username];
        if (user) {
            // if already in store, just change the current username  
            //FUTURE: check date against user mod date in database
            dispatch(setCurrentUsername(username));
            dispatch(userDataLoadComplete());
        } else {
            // user not in store, need to check database //TODO:
            fetch('https://jsonplaceholder.typicode.com/users?username=Bret')
                .then(response => response.json())
                // .then(json => delay(3000, json))
                .then(json=> dispatch(ingestUserData(json)))
                .then(() => dispatch(userDataLoadComplete()));
        }
    }
}

export function requestingUserData(username) {
    console.log("RUD");
    return { type: REQUESTING_USER_DATA, username };
}

export function setCurrentUsername(username) {
    return { type: SET_CURRENT_USERNAME, username }
}

export function ingestUserData(userData) {
    return (dispatch) =>
        {
            console.log("IUD");
            console.log(userData);
            dispatch({ type: SET_USER_DATA, userData })
        }
}

export function userDataLoadComplete() {
    return { type: USER_DATA_LOAD_COMPLETE };
}

我的减速器是骨料，看起来像这样：

export function SedFF(state = initialSedFFState, action) {
    let newState = _.cloneDeep(state);
    switch (action.type) {
        case SET_CURRENT_USERNAME:
            newState.currentUsername = action.username
            return newState;
        case LOAD_USER_DATA:
            //TODO: 
             return newState;
        case REQUESTING_USER_DATA:
            newState.isFetchingUserData = true;
            return newState;
        case RECEIVED_USER_DATA:
            //TODO:
            newState.isFetchingUserData = false;
            return newState
        case USER_DATA_LOAD_COMPLETE:
            //TODO:
            newState.isFetchingUserData = false;
            return newState

... etc, etc...

        default:
            return state
    }
}

当我按下 LASCU 按钮时，我得到以下输出：LASCU: username@email.com 来自我的动作创建者（在上面的动作创建者文件的第二行注明）。我的动作创建者文件的第 4 行没有得到 in dispatch 输出。我没有触发任何操作。

我不确定为什么调度没有触发。

我会注意到，在不同的组件（子组件）上，我可以让它触发整个组件，但我找不到任何差异。唯一真正的区别似乎是我在出口线路中没有路由器： export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SystemMenu));

为了它的价值，我的 thunk 中间件连接到 App.js（我的根组件的父级），如下所示：

const store = createStore(
    RootReducer, 
    initialState, 
    composeEnhancer(applyMiddleware(thunk))
);

class App extends React.Component {

    render() {
        return (
            <Provider store={store}>
                <CssBaseline />
                <BrowserRouter>
                    <WebFF />
                </BrowserRouter>
            </Provider>
        );
    }
}


export default withStyles(styles, { withTheme: true })(App);

想法？帮忙？

Answer 1

您仍然需要调度 Thunk 动作，否则它只会 return 动作而不用它做任何事情。

render() {
    return (
        <button onClick={() => 
            store.dispatch(loadAndSetCurrentUser("username@email.com"))
        }>LASCU</button>
    )
}

所以，基本上你所做的类似于：

const action = function (username) { return function () { alert(username); }}
console.log(action('123')); // This will just log `function () { alert(username); }`, without actually running the alert()

因此，即使您调用 action('123')，它也只是 return 一个仍然需要以某种方式调用的函数。对于 Thunks，必须调度 returned 函数。

Answer 2

查看问题中给出的渲染方法，问题似乎是您正在调用 原始导入函数，而不是 绑定函数道具。换句话说，更改为 this.props.loadAndSetCurrentUser() 应该可以正常工作。请注意 you shouldn't be importing the store directly into a component file.

更多详细信息，请参阅 React-Redux usage guide docs page on "Dispatching Actions with mapDispatch"。

行动不派遣

Actions not dispatching

reactjs

redux

redux-thunk

react-redux