轻松使用redux形式

时间:2019-02-18 08:43:56

标签: reactjs redux redux-form

是否可以将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。有什么办法可以解决这个问题?

1 个答案:

答案 0 :(得分:0)

您应该在根索引中添加<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();