Невозможно получить данные из FireStore через Redux

Question

Я пытаюсь получить данные постов в firestore с помощью redux. Но Actions must be plain objects. Use custom middleware for async actions. ошибка происходит. Я не знаю почему, но у действия при извлечении могут быть некоторые проблемы.

На самом деле, я понял, что с JSON API, но Firestore вызывает ошибку при получении сообщений.

actions / index. js

export function fetchPosts() {
  return dispatch => {
    postsRef.get().then(querySnapshot => {
      querySnapshot
        .forEach(function(doc) {
          const posts = doc.data();
          return posts;
        })
        .then(posts => {
          dispatch({ type: "FETCH_POSTS", payload: posts });
        });
    });
  };
}

Редукторы / Reducer_post.js

import _ from "lodash";
import { FETCH_POSTS, FETCH_POST } from "../actions";

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_POSTS:
      return action.posts;
    case FETCH_POST:
      return { ...state, [action.payload.data.id]: action.payload.data };

    // ** ES6 is following style **
    // const post = action.payload.data;
    // const newState = { ...state };
    // newState[post.id] = post;
    // return newState;
    default:
      return state;
  }
}

компонентов / posts_index.js

class PostsIndex extends Component {
  componentDidMount() {
    this.props.fetchPosts();
  }
  renderPosts() {
    console.log("this.props.2", this.props);
    return _.map(this.props.posts, post => {
      return (
    );
  }
}

function mapStateToProps(state) {
  return { posts: state.posts };
}

export default connect(
  mapStateToProps,
  { fetchPosts }
)(PostsIndex);

Редукторы / index.js

import { combineReducers } from "redux";
import PostsReducer from "./reducer_posts";
import { reducer as formReducer } from "redux-form";

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

export default rootReducer;

App.js

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

function App() {
  return (
    <Provider store={createStoreWithMiddleware(reducers)}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/posts/new" component={PostsNew} />
            <Route path="/posts/:id" component={PostsShow} />
            <Route path="/" component={PostsIndex} />
          </Switch>
        </div>
      </BrowserRouter>
    </Provider>
  );
}

Answer 1

import { createStore, applyMiddleware, combineReducers } from "redux";
import PostsReducer from "./reducer_posts";
import reduxThunk from "redux-thunk";
import { reducer as formReducer } from "redux-form";

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

Я пропустил ReduxThunk