今していること
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;
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。