How to add `redux-thunk` and `redux-promise`?

问题:

My boilerplate is reverse order from the redux-thunk docs. My boilerplate createStore is the argument, but the docs use createStore as a function. I am confuse now. How can I implement the store correctly?

I need to use redux-thunk. But my boilerplate is like this

import React, {Component} from 'react';
import './App.css';
import SelectTeam from "./components/select_teams";
import reducers from './reducers/index';
import {Provider} from 'react-redux';
import promise from "redux-promise";
import {applyMiddleware, createStore} from 'redux';
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
import LoginPage from './components/loginPage';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
...
render() {
    return (
      <Provider store={createStoreWithMiddleware(reducers)}>
        <BrowserRouter>
       ....

And here is the official docs

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

How can I add redux-thunk to my existing boilerplate?

回答1:

Just pass it to applyMiddleware

applyMiddleware(promise, thunk)(createStore)

Or:

createStore(reducer, applyMiddleware(promise, thunk))

回答2:

I use this. But I am not sure it is correct or not, but at least. It does not break my app(Just for now).

import thunk from 'redux-thunk';
...
<Provider store={createStoreWithMiddleware(reducers, applyMiddleware(thunk))}>