Диспетчеризация не является функцией TypeError

Question

Я новичок в Reaction-Redux, и я использую промежуточное программное обеспечение React-Thunk. Я получаю сообщение об ошибке "Uncaught TypeError: dispatch не является функцией" всякий раз, когда я пытаюсь запустить создателя действий (нажатием моей кнопки). Кто-нибудь знает, что происходит?

SRC / действия /index.js

function editUserName (newUserName) {
    return {
        type: 'CHANGE_USER_NAME',
        newUserName: newUserName
    }
}

export function editUserNameDelegate () {
    return function (dispatch, getState) {
        return dispatch(editUserName("thunkUser"))
    }
}

SRC / контейнеры /admin.js

import { editUserNameDelegate } from '../actions/index'
...
<input type="button" onClick={ editUserNameDelegate() } value="edit UserName" />

Answer 1

Вы исполняете editUserNameDelegate функция внутри renderвместо того, чтобы передать его как onClick обработчик. Ты хочешь onClick={editUserNameDelegate} вместо.

Кроме того, если вы пишете так, вам нужно убедиться, что функция связана с диспетчеризацией при вызове. Вы можете сделать это как:

export default connect(null, {editUserNameDelegate})(MyComponent)

А потом пройти onClick={this.props.editUserNameDelegate} в вашей функции рендеринга.

Answer 2

Если эта ошибка возникла в результате использования контекста, вы можете импортировать его как: const {state, dispatch} = useContext(местоположение контекста)

Answer 3

Магазин - это то, что обеспечивает dispatch функция. Так что вам нужно либо подключить ваш компонент к магазину, используя что-то вроде connect с реагировать на редукцию ( https://github.com/reactjs/react-redux), или вам нужно позвонить store.dispatch(editUserNameDelegate()),

Вы также должны убедиться, что вы добавили Redux-Thunk в качестве промежуточного программного обеспечения в вашем магазине. Узнайте больше о Red-Thunk здесь: https://github.com/gaearon/redux-thunk

Answer 4

Вы должны указать, что такое функция или класс src/container/admin.js?

Если это функциональный компонент, вы должны использовать onClick={() => editUserNameDelegate()}