Firestoreのデータを取得できない（Redux）

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

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

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

行動規範の内容に同意します

回答1件

自己解決

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;