使用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 connect。有什么办法可以解决这个问题吗？

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();