reactjs - 将 redux-form 与 easy-peasy 一起使用

Question

是否可以将 redux-form 与 easy-peasy 一起使用？

我试试这样

// @flow
import {
  type TRootReducer,
} from './TRootReducer';
import {
  createStore,
  reducer,
} from 'easy-peasy';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware, routerReducer } from './router';
import { reducer as formReducer } from 'redux-form';
import { reducer as permissions } from 'react-redux-permissions';
import auth from '../features/Auth/reducers';


export const history = createHistory();

const middleware = [routerMiddleware];

const store = createStore<TRootReducer>(
  {
    auth,
    permissions: reducer(permissions),
    router: reducer(routerReducer),
    form: reducer(formReducer),
  },
  {
    config: {
      middleware,
    },
  }
);

export default store;

然后在我的表单组件上

export default reduxForm({ form: 'login' })(Login);

但我得到一个错误

Could not find "store" in either the context or props of "Connect(Form(Login))". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Form(Login))".

好吧，我猜这是因为 reduxForm 在内部使用 react-redux 连接。有没有办法解决这个问题？

Answer 1

您应该<Provider>在根索引中添加标签：

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { StoreProvider } from 'easy-peasy';
import { Provider } from 'react-redux';
import App from './App';

import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <StoreProvider store={store}>
        <App />
    </StoreProvider>
  </Provider>
  , document.getElementById('root'));

serviceWorker.unregister();