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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Redux

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

React.js

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

Q&A

解決済

1回答

1429閲覧

Firestoreのデータを取得できない(Redux)

k10a

総合スコア35

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Redux

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

React.js

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

0グッド

1クリップ

投稿2019/10/05 00:33

編集2019/10/05 01:27

閲覧いただきまして、ありがとうございます。

現在、Firestoreに格納されているデータをReduxで取得して並べたいと考えています。ですが、PostsIndexcomponentDidMount()をするタイミングで、下記のエラーが出てしまい取得できません。

Error: Actions must be plain objects. Use custom middleware for async actions.

Jsonのデータをテストで取得する際には問題なかったのですが、Firebaseに切り替えた途端にエラーが出るようになりました。

action/index.js

JavaScript

1export function fetchPosts() { 2 return dispatch => { 3 postsRef.get().then(querySnapshot => { 4 querySnapshot 5 .forEach(function(doc) { 6 const posts = doc.data(); 7 return posts; 8 }) 9 .then(posts => { 10 dispatch({ type: "FETCH_POSTS", payload: posts }); 11 }); 12 }); 13 }; 14}

reducers/reducer_post.js

JavaScript

1import _ from "lodash"; 2import { FETCH_POSTS, FETCH_POST } from "../actions"; 3 4export default function(state = [], action) { 5 switch (action.type) { 6 case FETCH_POSTS: 7 return action.posts; 8 case FETCH_POST: 9 return { ...state, [action.payload.data.id]: action.payload.data }; 10 11 // ** ES6 is following style ** 12 // const post = action.payload.data; 13 // const newState = { ...state }; 14 // newState[post.id] = post; 15 // return newState; 16 default: 17 return state; 18 } 19}

components/posts_index.js

JavaScript

1class PostsIndex extends Component { 2 componentDidMount() { 3 this.props.fetchPosts(); 4 } 5 renderPosts() { 6 console.log("this.props.2", this.props); 7 return _.map(this.props.posts, post => { 8 return ( 9 ); 10 } 11} 12 13function mapStateToProps(state) { 14 return { posts: state.posts }; 15} 16 17export default connect( 18 mapStateToProps, 19 { fetchPosts } 20)(PostsIndex);

reducers/index.js

JavaScript

1import { combineReducers } from "redux"; 2import PostsReducer from "./reducer_posts"; 3import { reducer as formReducer } from "redux-form"; 4 5const rootReducer = combineReducers({ 6 posts: PostsReducer, 7 form: formReducer 8}); 9 10export default rootReducer;

App.js

JavaScript

1const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 2 3function App() { 4 return ( 5 <Provider store={createStoreWithMiddleware(reducers)}> 6 <BrowserRouter> 7 <div> 8 <Switch> 9 <Route path="/posts/new" component={PostsNew} /> 10 <Route path="/posts/:id" component={PostsShow} /> 11 <Route path="/" component={PostsIndex} /> 12 </Switch> 13 </div> 14 </BrowserRouter> 15 </Provider> 16 ); 17}

追記

async dispatchにしてみましたがやはりできませんでした。

JavaScript

1export const fetchPosts = () => async dispatch => { 2 postsRef.get().then(querySnapshot => { 3 querySnapshot 4 .forEach(function(doc) { 5 const posts = doc.data(); 6 return posts; 7 }) 8 .then(posts => { 9 dispatch({ type: "FETCH_POSTS", payload: posts }); 10 }); 11 }); 12};

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

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

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

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

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

guest

回答1

0

自己解決

JavaScript

1import { createStore, applyMiddleware, combineReducers } from "redux"; 2import PostsReducer from "./reducer_posts"; 3import reduxThunk from "redux-thunk"; 4import { reducer as formReducer } from "redux-form"; 5 6const rootReducer = combineReducers({ 7 posts: PostsReducer, 8 form: formReducer 9}); 10 11const store = createStore(rootReducer, applyMiddleware(reduxThunk)); 12export default store;

ReduxThunkが抜けていました。

投稿2019/10/05 06:26

k10a

総合スコア35

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問