Действия должны быть простым объектом. Использовать настраиваемое промежуточное ПО
Я использую Redux, redux-thunk с реакцией. Я возвращаю объект, но все равно получаю сообщение об ошибке.
authActions.js
export function register(){
return (dispatch)=>{
console.info("in register action");
dispatch({type:'auth_user'})
}
}
вызов этого действия из Register.js с помощью connect и props
import * as actions from '../actions/authActions';
class RegisterForm extends React.Component{
handleRegister = (e)=>{
e.preventDefault();
console.info("inside handle register");
console.info(this.props);
this.props.register();
}
}
var Register = connect(mapStateToProps,actions)(RegisterForm);
Ошибка
Действия должны быть простыми объектами. Используйте настраиваемое промежуточное ПО для асинхронных действий.
ИЗМЕНИТЬ 1
Реализован redux-thunk, как показано ниже.
import thunk from 'redux-thunk';
const store = createStore(authReducer,applyMiddleware(
thunk,
loggerMiddleware
),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
ReactDOM.render(
<Provider store = {store}>
<App />
</Provider>,
document.getElementById('root'));
Код можно найти на github по ссылкеhttps://github.com/abhikulshrestha22/social-network/tree/master/client
все та же ошибка. Не получилось :(
Попробуйте включить redux-thunk
Это также происходит, когда вы не добавляете redux-thunk как middleware в свой магазин. Попробуй добавить.
Я добавил redux-thunk. пожалуйста, проверьте внесенные мной изменения.
Можете ли вы поделиться полным кодом. Ссылка, которой вы поделились, устарела
Ответы 4
действия / index.js
// with thunk
export const register = () => dispatch => (
dispatch({ type: 'auth_user' })
)
// without thunk
export const register = () => ({ type: 'auth_user' })
компонент / example.js
import React from 'react';
import { connect } from 'react-redux';
import { register } from '../actions';
const Example = ({ register }) => (
<button onClick = {register}>Register</button>
)
export default connect(null, { register })(Example);
редукторы / index.js
const authReducer = (state=false, {type, payload}) => {
switch(type) {
case 'auth_user': return !state;
default: return state;
}
}
Если у вас все еще возникают проблемы, вот рабочий пример: codeandbox.io/s/yqo75n896x
@mattcarlotta, вы можете мне помочь с этим вопросом stackoverflow.com/questions/53265169/…
handleRegister = (e) => {
...
this.props.dispatch(register());
}
Конечно:
- Применить промежуточное ПО редукционный преобразователь
- В Register.js импортируйте действие
register() - Подключите компонент регистр к хранилищу Redux с помощью React-Redux
connect()
Обновлено:
Если этот упрощенный код (без mapDispatchToProps) не работает, значит, с вашим вопросом что-то не так.
Может быть, полезная нагрузка вашего действия содержит что-то, что не является простым объектом? Например. обещание, возвращенное аксиомами?
Code Sandbox в соответствии с вашим вопросом, все работает нормально: https://codesandbox.io/s/j2mny6rvnv
Нет ничего плохого в текущей настройке, которую вы показали выше.
Думаю, ваш mapDispatchToProps может быть основной причиной этой проблемы.
Вы должны объявить, что вашему подключению нравится это
export default connect(
null,
{ register }
)(Register);
вместо (если я не ошибаюсь)
const mapDispatchToProps = dispatch => {
return {
register: () => {
dispatch(register());
}
};
};
export default connect(
null,
mapDispatchToProps
)(Register);
Это мое предположение. Надеюсь, это поможет вам.
Привет, Тацу, я отредактировал вопрос и добавил часть, в которой используется Connect. Не могли бы вы взглянуть.
Измените этот import * as actions from '../actions/authActions'; на import { register } from '../actions/authActions'; и замените этот var Register = connect(mapStateToProps,actions)(RegisterForm); на var Register = connect(mapStateToProps, { register })(RegisterForm); Давайте сначала попробуем это и посмотрим, работает ли это
Я также пробовал использовать имя registerAction. Это не сработало
Вы используете регистр от mapDispatchToProps:
this.props.register();
Но это просто:
var Register = connect(mapStateToProps,actions)(RegisterForm);
Итак, регистр вызова не будет работать, потому что он находится в действии, actions.register:
var Register = connect(mapStateToProps,{register: actions.register})(RegisterForm);
Теперь это должно решить вашу проблему.
Добавьте
return {}послеdispatch({type:'auth_user'}).