Действия не отправляются - PullRequest
Новая
       21

Действия не отправляются

0 голосов
/ 16 апреля 2019

Когда я запускаю создатель действий для создания своего 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)));

Файл My 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 от моего создателя действия (отмечено во второй строке файла создателя действия выше).Я НЕ получаю вывод in dispatch в 4-й строке моего файла создателя действий.Я не получаю никаких действий запуска.

Я не уверен, почему отправка не запускается.

Я отмечу, что на другом компоненте (подкомпоненте), я могу получить егоуволить целиком, но я не могу найти никаких отличий.Единственная реальная разница заключается в том, что у меня нет маршрутизатора в строке экспорта: export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SystemMenu));

Для чего бы то ни было, мое промежуточное промежуточное ПО подключено в 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);

Мысли?Помощь

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Если посмотреть на метод рендеринга, приведенный в вопросе, то проблема заключается в том, что вы вызываете оригинальную импортированную функцию , а не связанную с функцию из реквизита .Другими словами, изменение на this.props.loadAndSetCurrentUser() должно работать правильно.Обратите внимание, что вы не должны импортировать хранилище непосредственно в файл компонента .

. Для получения более подробной информации, пожалуйста, смотрите страницу документации по использованию React-Redux на странице «Диспетчеризация действий сmapDispatch ".

0 голосов
/ 16 апреля 2019

Вам все еще нужно отправить действие Thunk, иначе оно просто вернет действие и ничего с ним не сделает. 

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'), он просто вернет функцию, которую все равно нужно как-то вызывать.В случае Thunks возвращаемая функция должна быть отправлена.

...