मैं स्टोर को बच्चों के घटकों के लिए उपलब्ध कराने में असमर्थ हूं।

सेटअप बैक-एंड के रूप में सिम्फनी के साथ एक एसपीए है, हालांकि इससे इस मामले में कोई फर्क नहीं पड़ना चाहिए।

वेबपैक के लिए प्रवेश बिंदु फ़ाइल है:

/client/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import ReduxPromise from 'redux-promise';
import Root from './App';
import registerServiceWorker from './registerServiceWorker';
import reducers from './pages/combine_reducers';

let composeEnhancers = typeof(window) !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(
   reducers,
   composeEnhancers(
      applyMiddleware(ReduxPromise)
   )
)

ReactDOM.render(
     <Root store={store} />
, document.querySelector('#root')
);

registerServiceWorker();

इस तरह के ऐप्स यहां हैं:

/client/App.js

import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom';

import HomePage from './pages/home/';
import AccountPage from './pages/account/';


const Root = ({ store }) => {
return(
    <Provider store={store}>
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <Router>
                    <div>
                        <Link to="/account">Account</Link>
                        <Link to="/">Home</Link>
                        <div>
                            <Switch>
                                <Route path="/account" component={AccountPage} />
                                <Route path="/" component={HomePage} />
                            </Switch>
                        </div>
                    </div>
                </Router>
            </div>
</Provider>
)
}


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

export default Root;

अब तक सब ठीक है। स्टोर App.js में उपलब्ध है। लेकिन अगले स्तर पर ऐसा नहीं है। जैसा कि आप देख सकते हैं कि मैं कनेक्ट () का उपयोग करके स्टोर को उपलब्ध कराने का प्रयास कर रहा हूं।

/client/pages/home/index.js

import React from 'react';
import { connect } from 'react-redux';
import Register from '../common/register/';
import PropTypes from 'prop-types';

class Home extends React.Component {
   constructor(props){
     super(props)
     console.log(props);
   }

    render() {
        return (
            <div>
                <h1> Hello World from home! </h1>
                <Register />
            </div>
        );
    }
}

Home.propTypes = {
   store: PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
   return {
        store: state.store,
   }
}


export default connect(mapStateToProps)(Home)

निचले स्तर पर, रजिस्टर घटक, मैं फॉर्म जमा करने में सक्षम हूं, लेकिन स्टोर उपलब्ध नहीं होने के कारण, मैं सर्वर से आने वाली प्रतिक्रिया को पकड़ने में असमर्थ हूं।

/client/pages/common/register/index.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import RegisterForm from './containers/register';
import { actionSubmitRegister } from './actions/';
import PropTypes from 'prop-types';

class Register extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
           registerResponse: '',
        }
        this.onSubmitRegister = this.onSubmitRegister.bind(this);
    }

onSubmitRegister (event) {
    event.preventDefault();
    let submitForm = new Promise((resolve, reject) => {
        actionSubmitRegister(this.props.form.RegisterForm.values);
    });
    submitForm.then((response) => {
        console.log('response',response);
        this.setState({registerResponse:     this.props.submit_register.data});
        console.log('registerResponse', this.state.registerResponse);
    }).catch((error) => {
        console.log(error);
    });
}

render(){           
    return (
        <div>
            <div>
                <RegisterForm
                    submitRegister={this.onSubmitRegister}
                />
                <h3>{this.state.registerResponse}</h3>
            </div>
        </div>
        )
}
}
/*
Register.propTypes = {
    store: PropTypes.object.isRequired
}
*/
const mapStateToProps = (state) => {
    return {
        form: state.form,
        submit_register: state.submit_register,
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({actionSubmitRegister}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Register);
2
BernardA 3 अप्रैल 2018, 12:27

3 जवाब

सबसे बढ़िया उत्तर

mapStateToProps में आप store: state.store को मैप करते हैं, लेकिन सामान्य तौर पर आप इस पद्धति का उपयोग अपने राज्य से अपने घटक में प्रॉप्स के लिए एकल प्रॉप्स को मैप करने के लिए करते हैं, न कि पूरे स्टोर को मैप करने के लिए (यदि यह संभव है)। जैसे:

form: state.form

2
Jonathan R 3 अप्रैल 2018, 09:36

मुझे ऊपर प्राप्त इनपुट के बाद, मैंने अपने कोड की समीक्षा की और इसे काम करने के लिए मिला।

असल में मुख्य मुद्दा /client/pages/common/register/index.js फ़ाइल पर था, लेकिन मैं संदर्भ के लिए पूरी श्रृंखला पोस्ट कर रहा हूं:

/क्लाइंट/इंडेक्स.जेएस

बदलने के लिए कुछ नहीं

/क्लाइंट/ऐप.जेएस

PropTypes के संदर्भ आवश्यक नहीं लगते, इसलिए मैंने उन्हें निकाल लिया।

import React from 'react';
import { Provider } from 'react-redux';
import {
  BrowserRouter as Router,
  Route,
 Link,
 Switch
} from 'react-router-dom';

import HomePage from './pages/home/';
import AccountPage from './pages/account/';


const Root = ({ store }) => {
    return(
        <Provider store={store}>
            <div className="App">
                <header className="App-header">
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <Router>
                    <div>
                        <Link to="/account">Account</Link>
                        <Link to="/">Home</Link>
                        <div>
                            <Switch>
                                <Route path="/account" component={AccountPage} />
                                <Route path="/" component={HomePage} />
                            </Switch>
                        </div>
                    </div>
                </Router>
            </div>
    </Provider>
    )
}

export default Root;

/क्लाइंट/पेज/होम/इंडेक्स.जेएस

यहां प्रॉपटाइप और कनेक्ट () दोनों की आवश्यकता नहीं लगती है।

import React from 'react';
import Register from '../common/register/';

class Home extends React.Component {
    constructor(props){
        super(props)
    }

    render() {
        return (
            <div>
                <h1> Hello World from home! </h1>
                <Register />
            </div>
        );
    }
}

export default Home;

/client/pages/common/register/index.js

यहाँ मुख्य मुद्दा onSubmitRegister() विधि थी। वादा ठीक से सेटअप नहीं था और मैं इस.प्रॉप्स का उपयोग करने के बजाय सीधे कार्रवाई का संदर्भ दे रहा था। रिएक्ट ऐसा नहीं लगता।

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import RegisterForm from './containers/register';
import { actionSubmitRegister } from './actions/';

class Register extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            registerResponse: '',
        }
        this.onSubmitRegister = this.onSubmitRegister.bind(this);
    }

onSubmitRegister (event) {
    event.preventDefault();
    let submitForm = new Promise((resolve) => {
        resolve(this.props.actionSubmitRegister(this.props.form.RegisterForm.values));
    });
    submitForm.then((result) => {
        let data = result.payload.data;
        this.setState({registerResponse: data.message});
    }).catch((error) => {
        console.log(error);
    });
}

render(){           
    return (
        <div>
            <div>
                <RegisterForm
                    submitRegister={this.onSubmitRegister}
                />
                <h3>{this.state.registerResponse}</h3>
            </div>
        </div>
        )
}
}

const mapStateToProps = (state) => {
    return {
        form: state.form,
        submit_register: state.submit_register,
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({actionSubmitRegister}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Register);
0
BernardA 4 अप्रैल 2018, 08:38

आप स्टोर ऑब्जेक्ट को प्रॉप्स में एक्सेस नहीं कर पा रहे हैं, इसका कारण यह है कि आप इसे प्रॉप्स के माध्यम से नीचे नहीं भेज रहे हैं। प्रतिक्रिया-रिडक्स पुस्तकालय से प्रदाता, इसे सभी बच्चों को तत्व पेड़ के नीचे उपलब्ध कराता है। स्टोर को रिएक्ट के संदर्भ एपीआई के माध्यम से उपलब्ध कराया जाता है, न कि प्रॉप्स के माध्यम से।

"संदर्भ डेटा साझा करने के लिए डिज़ाइन किया गया है जिसे रिएक्ट घटकों के पेड़ के लिए" वैश्विक "माना जा सकता है।"

तो प्रदाता के एक बच्चे के घटक में, अब हम कुछ ऐसा कर सकते हैं

render() {
 const { store } = this.context;
 console.log(store)
 return(
 ...
 )
}

यह उसी तरह है जैसे रिएक्ट-रेडक्स का कनेक्ट एचओसी स्टोर तक पहुंचने में सक्षम है और बाद में मैपस्टेटटॉपप्रॉप्स या मैपडिस्पैचटॉपप्रॉप्स के लिए स्टोर की प्रेषण विधि का उपयोग करता है।

इसके अलावा, मुझे लगता है कि प्रदाता की आवश्यकता है कि यह बाल तत्व एक प्रतिक्रिया घटक है। अधिक गहराई से जानने के लिए यह ट्यूटोरियल देखें। व्याख्या।

0
Thomas 3 अप्रैल 2018, 13:11