redux-Form kann nicht gefunden Laden

Question

Ich bin neu in React und ich versuche diese http://redux-form.com/5.2.5/#/getting-started?_k=vz58jr Start Form meiner Komponente anzuwenden, aber es gibt Probleme:

Uncaught unveränderliche Verletzung: Kann nicht „store finden "entweder im Kontext oder Requisiten von" Connect (ReduxForm (ContactForm)) ". Entweder wickeln Sie die Root-Komponente in ein, oder übergeben Sie explizit "speichern" als Prop zu "Connect (ReduxForm (ContactForm))".

was kann ich damit machen?

Answer 1

Ich glaube, Sie müssen den Laden mit Anbieter übergeben. Hier ist ein GitHub Repo-I mit redux-Form Arbeits haben: https://github.com/joshuaslate/mern-starter/blob/master/client/src/index.js#L34

Hier ist ein Video-Shop auf vorbei nach unten mit Anbieter: https://egghead.io/lessons/javascript-redux-passing-the-store-down-with-provider-from-react-redux

Answer 2

Alle diese Beispiele sind wrapped with Provider. Wie man einen Redux-Speicher einrichtet, ist außerhalb der Reichweite der redux-form Dokumentation. Folge den Links, die Joshua veröffentlicht hat, um mehr darüber zu erfahren.

Answer 3

Ich habe Redox-Mock-Store, Reaktion-Redux, Enzym und Chai verwendet.

Zum Beispiel:

SINGUP

class Signup extends Component { ... } 

Signup = reduxForm({ 
    form: 'newUser', 
    fields: ['email', 'password', 'confirmPassword'] 
})(Signup); 

Signup = connect(null, actions)(Signup); 

export default Signup; 

signup.test

import React from 'react'; 
import { shallow, mount } from 'enzyme'; 
import { expect } from 'chai'; 
import configureStore from 'redux-mock-store'; 
import { Provider } from 'react-redux'; 
import Signup from '../src/components/signup'; 

let wrapper; 
const mockStore = configureStore([]); 
const store = mockStore({}); 

describe('Signup',() => { 

    beforeEach(() => { 
     wrapper = mount(
     <Provider store={store}> 
      <Signup /> 
     </Provider> 
    ); 
    }); 

    it ('should have signup className',() => { 
    expect(wrapper.find('.signup')).to.have.length(1); 
    }); 

});