CODEWITHSUNDEEP
javascriptreactjsredux
Arman Feyzi
Arman Feyzi

Reputation: 838

react redux dispatcher "Actions must be plain objects" error

when run this section return error "Actions must be plain objects. Use custom middleware for async actions."

here is my code:

export function login(data) {
  const login_data = new FormData();

  login_data.append('username', data.username);
  login_data.append('password', data.password);
  login_data.append('grant_type', 'password');
  login_data.append('scope', 'read');

  return dispatch => {
    console.log("LOGIN DISPATCHER");
    axios.defaults.headers.common['Authorization'] = 'Basic ' + btoa('mobapp:SSSSS');
    return axios.post('http://172.16.79.25:9999/oauth/token', login_data)
    .then(res => {
      const token = res.data.access_token;
      localStorage.setItem('access_token', token);
      setAuthorizationToken(token);
      dispatch(setCurrentUser(token));
    });
  }
}

console.log("LOGIN DISPATCHER") never run in this code!!

Upvotes: 0

Views: 43

Answers (1)

Khiem Tran
Khiem Tran

Reputation: 6169

Your action actually return a function, not a plain object that "plain" redux needs.

You need to add some middleware to handle this kind of action like redux-thunk.

Here is the sample setup:

import thunk from 'redux-thunk';

const store = createStore(
  reducers,
  applyMiddleware(thunk)
);

Upvotes: 3

Related Questions