質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2373閲覧

reduxにて「Use custom middleware for async actions.」のエラー

kazoogon

総合スコア281

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/10/11 09:37

編集2018/10/12 14:40

今していること

react.js reduxを使用し、webアプリケーションの作成。
その中でのユーザー一覧を表示するページについて。

困っていること

現在はAPIから(https://randomuser.me/api/)とりあえず情報を取得。
しかし「Error: Actions must be plain objects. Use custom middleware for async actions.」のエラー発生。
しかしcreateStoreの引数にredux-thunkを渡しているので理由がよくわからない

コード

//Users.js //表示部分などは省略 import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { fetchUsers } from '../actions/userActions'; class Users extends Component { constructor(props) { super(props); this.state = { users: [] } } fetchUsers(){ this.props.fetchUsers(); } render() { return ( <React.Fragment> <button type="button" className="btn btn-success fetch" onClick={this.fetchUsers.bind(this)} > Fetch </button> {users} </React.Fragment> ); } } Users.propTypes = { fetchUsers: PropTypes.func.isRequired, } const mapStateToProps = state => ({ users: state.users }); export default connect(mapStateToProps, { fetchUsers })(Users);
//action部分 //三人分の人物情報をapiから取ってくる import { FETCH_USERS }from './types'; const proxy = "https://cors-anywhere.herokuapp.com/"; // get users export const fetchUsers = async(dispatch) => { let users = []; //三人分の人物情報をapiから取ってくる for(let i=0; i<3; i++) { const response = await fetch(`${proxy}https://randomuser.me/api/`); const json = await response.json(); users.push(json.results); } dispatch({ type: FETCH_USERS, payload: users }) };
//Reducer部分 import { FETCH_USERS } from '../actions/types'; const initialState = { users: [], }; export default function(state = initialState, action) { switch(action.type) { case FETCH_USERS: return { users: action.payload, } default: return state; } }
//store部分 import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const initialState = {}; const middleware = [thunk]; const store = createStore( rootReducer, initialState, compose( applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) ); export default store;

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

export const fetchUsers = async(dispatch) => {

export const fetchUsers = () => async(dispatch) => {

//dispatchを引数として渡していたためおこったバグでした

投稿2018/10/13 16:50

kazoogon

総合スコア281

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問