Question

控制台抛出以下错误：

无法找到＆＃34;存储＆＃34;在＆＃34;连接（表格（表格））＆＃34;的上下文或道具中。将根组件包装在＆lt;提供商＆gt;，或明确传递＆＃34;存储＆＃34;作为＆＃34;连接（表格（表格））和＃34;的支柱。

完成所有内容，如在redux-form教程中所述，之前的商店正在使用模拟减速器。

出现错误的行是执行render（）的位置 - 查看index.js文件 - 。

configureStore.js

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './rootReducer';


export default function configureStore(initialState = {}) {
  const store = createStore(rootReducer, initialState, devToolsEnhancer());

  return { store };
}

index.js

import React from 'react';
import { render } from 'react-dom';
import Root from './Root';
import './index.css';
import App from './whitesheet-components/App';
import registerServiceWorker from './registerServiceWorker';
import configureStore from './store/configureStore';

const { store } = configureStore();
const MOUNT_NODE = document.getElementById('root');

render(
  <App>
    <Root store={store} />
  </App>,
  MOUNT_NODE,
);


registerServiceWorker();

Root.js

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';

const Root = ({ store }) => (
  <Provider store={store} />
);

Root.propTypes = {
  store: PropTypes.object.isRequired,
};

export default Root;

rootReducer.js

// use combineReducers when they are more than one
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import mockReducer from './mockReducer';

const rootReducer = combineReducers({
  mockReducer,
  form,
});

export default rootReducer;

Form.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import titleField from './titleField';

const Form = (props) => {
  const {
    handleSubmit, submitting,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field component={titleField} />
      <div>
        <button type="submit" disabled={submitting}>
            Submit
        </button>
        <button type="button" disabled={submitting} onClick={() => console.log('boton para agregar input')}>
            +
        </button>
      </div>
    </form>
  );
};

Form.propTypes = {
  handleSubmit: PropTypes.any.isRequired,
  submitting: PropTypes.any.isRequired,
};


// validate: nombreFuncion, // <--- validation function given to redux-form
export default reduxForm({
  form: 'exerciseCreatorForm', // a unique identifier for this form
})(Form);

ExerciseCreator.js

import React from 'react';
import Form from './Form';


import './styles.css';

const ExerciseCreator = () => (
  <div className="component-exercise-creator">
    <Form />
  </div>
);

export default ExerciseCreator;

Answer 1

让提供商包装您的App组件，而不是相反。像这样：

// Root.js
// ...other codes...
const Root = ({ store, children }) => (
  <Provider store={store}>{children}</Provider>
);
// ...other codes...

// index.js
// ...other codes...
render(
  <Root store={store}>
    <App />
  </Root>,
  MOUNT_NODE,
);
// ...other codes...

找不到使用redux-form的商店

1 个答案: