मैं "प्रतिक्रिया करने के लिए नया" हूं। मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जहां मैं भारत, चीन, रूस नामक तीन बटन बना रहा हूं। बटन क्लिक करने पर पैराग्राफ का टेक्स्ट बदल जाता है।

इसके लिए, मैंने प्रारंभिक अवस्था के लिए 4 प्रेजेंटेशनल कंपोनेंट्स, 3 एक्शन, 1 रेड्यूसर और अतिरिक्त रेड्यूसर बनाया है।

मैं store से connect() के माध्यम से store से Presentational Component तक अनुच्छेद में पाठ भेजने का प्रयास कर रहा हूं। हालांकि, यह काम नहीं कर रहा है।



मेरा कोड निम्नलिखित है:

Index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import App from './components/App';

const store = createStore(rootReducer);
console.log(store.getState());
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

क्रियाएँ/index.js

export const india = text => ({
  type: 'INDIA',
  text
});
export const china = text => ({
  type: 'CHINA',
  text
});
export const russia = text => ({
  type: 'RUSSIA',
  text
});

रेड्यूसर/देश.जेएस

const initialState = {
  text: 'ABC',
  isIClicked: false,
  isCClicked: false,
  isRClicked: false
};
const country = (state = initialState, action) => {
  switch (action.type) {
    case 'INDIA':
      return {
        text: action.text,
        isIClicked: true,
        isCClicked: false,
        isRClicked: false
      };
    case 'CHINA':
      return {
        text: action.text,
        isIClicked: false,
        isCClicked: true,
        isRClicked: false
      };
    case 'RUSSIA':
      return {
        text: action.text,
        isIClicked: false,
        isCClicked: false,
        isRClicked: true
      };
    default:
      return state;
  }
};
export default country;

घटक/IndiaBtn.js

import React from 'react';

const IndiaBtn = ({ isIClicked, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        color: isIClicked ? 'white' : 'black',
        backgroundColor: isIClicked ? 'blue' : 'white'
      }}
    >
      India
    </button>
  );
};
export default IndiaBtn;

घटक/चीनबीटीएन.जेएस

import React from 'react';

const ChinaBtn = ({ isCClicked, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        color: isCClicked ? 'white' : 'black',
        backgroundColor: isCClicked ? 'blue' : 'white'
      }}
    >
      China
    </button>
  );
};
export default ChinaBtn;

घटक/रूसBtn.js

import React from 'react';

const RussiaBtn = ({ isRClicked, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        color: isRClicked ? 'white' : 'black',
        backgroundColor: isRClicked ? 'blue' : 'white'
      }}
    >
      Russia
    </button>
  );
};
export default RussiaBtn;

घटक/डिस्प्ले.जेएस

import React from 'react';

const display = ({ text }) => {
  return <div style={{ padding: '16px' }}>{text}</div>;
};
export default display;

घटक/App.js

import React from 'react';
import IndiaBtnContainer from '../containers/IndiaBtnContainer';
import ChinaBtnContainer from '../containers/ChinaBtnContainer';
import RussiaBtnContainer from '../containers/RussiaBtnContainer';
import DisplayContainer from '../containers/DisplayContainer';

const App = () => {
  return (
    <div>
      <div>
        <span><IndiaBtnContainer /></span>
        <span><ChinaBtnContainer /></span>
        <span><RussiaBtnContainer /></span>
      </div>
      <div>
        <DisplayContainer />
      </div>
    </div>
  );
};
export default App;

कंटेनर/IndiaBtnContainer.js

import { connect } from 'react-redux';
import IndiaBtn from '../components/IndiaBtn';
import { india } from '../actions';

const mapStateToProps = state => ({
  isIClicked: state.isIClicked
});
const mapDispatchToProps = dispatch => ({
  onClick: () => dispatch(india('india'))
});
export default connect(mapStateToProps, mapDispatchToProps)(IndiaBtn);

कंटेनर/ChinaBtnContainer.js

import { connect } from 'react-redux';
import ChinaBtn from '../components/ChinaBtn';
import { china } from '../actions';

const mapStateToProps = state => ({
  isCClicked: state.isCClicked
});
const mapDispatchToProps = dispatch => ({
  onClick: () => dispatch(china('china'))
});
export default connect(mapStateToProps, mapDispatchToProps)(ChinaBtn);

कंटेनर/रूसBtnContainer.js

import { connect } from 'react-redux';
import RussiaBtn from '../components/RussiaBtn';
import { russia } from '../actions';

const mapStateToProps = state => ({
  isCClicked: state.isCClicked
});
const mapDispatchToProps = dispatch => ({
  onClick: () => dispatch(russia('russia'))
});
export default connect(mapStateToProps, mapDispatchToProps)(RussiaBtn);

कंटेनर/डिस्प्लेकंटेनर.जेएस

import { connect } from 'react-redux';
import display from '../components/display';

const mapStateToProps = state => ({
  text: state.text
});
export default connect(mapStateToProps)(display);

नोट:

  1. क्षमा करें, लंबे कोड के लिए। लेकिन, मैंने सोचा कि समस्या को समझना जरूरी है
  2. Container Components, connect, mapStateToProps, mapDispatchToProps पर ध्यान दें। मेरे हिसाब से समस्या तो होनी ही चाहिए।
0
Kiran 30 अप्रैल 2018, 13:30

1 उत्तर

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

आपका रेड्यूसर returns an array और इसलिए mapStateToProps आपको सही मान नहीं दे रहा है क्योंकि आप राज्य को एक वस्तु होने की उम्मीद करते हैं, आपको जो चाहिए वह है

const initialState = {
          text: '',
          isIClicked: false,
          isCClicked: false,
          isRClicked: false,
}
const country = (state=initialState,action) => {
    switch (action.type) {
        case 'INDIA':
          return {
          text: action.text,
          isIClicked: true,
          isCClicked: false,
          isRClicked: false,
          }
        case 'CHINA':
          return {
          text: action.text,
          isIClicked: false,
          isCClicked: true,
          isRClicked: false,
        }
       case 'RUSSIA':
         return {
          text: action.text,
          isIClicked: false,
          isCClicked: false,
          isRClicked: true,
        }
        default:
          return state
      }
export default country
1
Shubham Khatri 30 अप्रैल 2018, 13:43