Действия должны быть простым объектом.Использовать пользовательское промежуточное ПО - PullRequest
Новая
       6

Действия должны быть простым объектом.Использовать пользовательское промежуточное ПО

0 голосов
/ 14 октября 2018

Я использую Redux, Redux-Thunk с реагировать.Я возвращаю объект, но все еще получаю сообщение об ошибке.

authActions.js 

export function register(){
return (dispatch)=>{
    console.log("in register action");
    dispatch({type:'auth_user'})
}
}

, вызывающее это действие из Register.js с использованием connectи реквизиты 

import  * as actions  from '../actions/authActions';

class RegisterForm extends React.Component{

handleRegister = (e)=>{
    e.preventDefault();
    console.log("inside handle register");
    console.log(this.props);
    this.props.register();
 }
}
var Register = connect(mapStateToProps,actions)(RegisterForm);

Ошибка

Действия должны быть простыми объектами.Используйте пользовательское промежуточное программное обеспечение для асинхронных действий.

РЕДАКТИРОВАТЬ 1

Реализовано Redx-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

Ответы [ 4 ]

0 голосов
/ 28 ноября 2018

Вы используете регистр из mapDispatchToProps: 

this.props.register();

Но это просто: 

var Register = connect(mapStateToProps,actions)(RegisterForm);

Таким образом, регистр вызовов не будет работать, потому что он в действиях, actions.register: 

var Register = connect(mapStateToProps,{register: actions.register})(RegisterForm);

Теперь это должно исправить вашу проблему.

0 голосов
/ 23 ноября 2018 
handleRegister = (e) => {
  ...
  this.props.dispatch(register());
}

Конечно:

  • Применить redux-thunk middleware
  • In Register.js import register() action
  • Соединение Регистрация компонента в Redux хранилище с response-redux connect()

EDIT:

Если этот упрощенный код (без mapDispatchToProps) не работает, значит, с вашим вопросом что-то не так.Может быть, полезная нагрузка вашего действия содержит что-то, что не является простым объектом?Например, обещание, возвращенное axios?

Код Песочница в соответствии с вашим вопросом, кажется, все работает нормально: https://codesandbox.io/s/j2mny6rvnv

0 голосов
/ 24 ноября 2018

Нет ничего плохого в текущей настройке, которую вы показали выше.

Я думаю, что ваша mapDispatchToProps может быть основной причиной этой проблемы.

Вы должны заявить, что ваше подключение нравится так

export default connect(
  null,
  { register }
)(Register);

вместо (если я не ошибаюсь) 

const mapDispatchToProps = dispatch => {
  return {
    register: () => {
      dispatch(register());
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Register);

Это мое предположение.Надеюсь, это поможет вам.

0 голосов
/ 14 октября 2018

actions / index.js 

// with thunk
export const register = () => dispatch => (
   dispatch({ type: 'auth_user' })
)

// without thunk
export const register = () => ({ type: 'auth_user' })

component / 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);

редукторы / индекс.js 

const authReducer = (state=false, {type, payload}) => {
  switch(type) {
    case 'auth_user': return !state;
    default: return state;
  }
}
...