Действия должны быть простыми объектами.Redux не работает - PullRequest
Новая
       4

Действия должны быть простыми объектами.Redux не работает

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

Я пытаюсь добавить промежуточное программное обеспечение Redux-Thunk, чтобы добавить функциональность регистрации и входа в мое приложение.Но код, кажется, не работает для регистрации.Это дает следующую ошибку -

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

Код выглядит следующим образом:

Index.js - Импорт thunk и его использование 

 import {createStore, applyMiddleware} from 'redux';
 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'));

actions / authActions.js -Создание регистра функции для отправки действия 

export function register(){
    return (dispatch)=>{

        dispatch({type:'auth_user'})

    }
}

компоненты / Register.js - Компонент, который использует вышеупомянутую функцию регистра с использованием приставки

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

authReducer.js 

import {AUTH_ERROR,UNAUTH_USER,FETCH_MESSAGE, AUTH_USER} from '../actions/types';


const initialState = {
    loggedIn:false,
    errorMessage:''
}

const   authReducer = (state=initialState,action)=>{
    console.log("action is")
    console.log(action);
    switch(action.type){
        case AUTH_USER:
            {
                console.log("Reached in reducer");
                return {...state,loggedIn:true}}

        case UNAUTH_USER:
            return {...state, loggedIn:false}
        default:
            return state;
    }

}

export default authReducer;

/ action / types.js 

export const AUTH_USER = 'auth_user'
export const UNAUTH_USER = 'unauth_user'
export const AUTH_ERROR = 'auth_error'
export const FETCH_MESSAGE = 'fetch_message'

Ответы [ 2 ]

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

Можете ли вы попробовать следующий фрагмент в действиях. 

export function register=()=>{
    return {
        type:'auth_user'
    }
}
0 голосов
/ 24 ноября 2018

Настройка вашего магазина кажется неверной.Напишите свой магазин как: 

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  authReducer,
  {},
  composeEnhancers(
    applyMiddleware(
      thunk,
      loggerMiddleware
    )
  )
);
...