So verbinden Sie mapStateToProps und mapDispatchToProps mit reduxForm

Question

Ich versuche, Redux-Form zu verwenden. Ich folge dem Beispiel aus dem offiziellen Dokument.

import React, { Component } from 'react'; 
import { reduxForm } from 'redux-form'; 
import { connect } from 'react-redux'; 

class Example extends Component { 
    // ... 
}; 

const mapStateToProps = (state) => ({ 
    // ... 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    // ... 
}); 

Example = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Example); 

export default reduxForm({ 
    form: 'example' // a unique name for this form 
})(Example); 

Dies gibt Syntaxfehler: „Beispiel“ ist schreibgeschützt. Ich würde mich freuen, wenn mir jemand sagen könnte, woran der Fehler liegt. Ich verwende redux-form@7.2.0.

Dank

Answer 1

Ich schaffe in der Regel eine separate js den Zustand und Requisiten zu kartieren. Bitte beachten Sie ein Beispiel unter:

index.js

import Example from './Example' 

import { connect } from 'react-redux' 

function mapStateToProp (state) { 
    return { 
    anything: get(state, 'anything', {}) 
    } 
} 

const mapDispatchToProp = dispatch => ({ 
}) 

export default connect(
    mapStateToProp, 
    mapDispatchToProp 
)(Example) 

Answer 2

Hier ein Beispiel. Sie müssen Funktion verwenden, dann Funktion reduxForm

import React, { Component } from 'react'; 
import { reduxForm } from 'redux-form'; 
import { connect } from 'react-redux'; 

const mapStateToProps =() => ({}); 

const mapToProps = {}; 

const mapToForm = { 
    form: 'example' 
}; 

class Example extends Component { 
}; 

export default connect(mapStateToProps, mapToProps)(
    reduxForm(mapToForm)(
    Example 
) 
);