Connect () не передает состояние от магазина к ребенку - PullRequest
Новая
       16

Connect () не передает состояние от магазина к ребенку

0 голосов
/ 30 апреля 2018

Я "новичок в реакции". Я работаю над проектом, в котором я создаю три кнопки с именами Индия , Китай , Россия . При нажатии кнопки текст абзаца изменяется.

Для этого я создал 4 презентационных компонента, 3 действия, 1 редуктор и дополнительный редуктор для начального состояния.

Я пытаюсь отправить текст в абзац с store до Presentational Component через connect(). Однако это не работает.

Мой код выглядит следующим образом:

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
});

редукторы / country.js 

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;

компоненты / ChinaBtn.js 

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;

компоненты / RussiaBtn.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;

компоненты / display.js 

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);

контейнеры / RussiaBtnContainer.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);

контейнеры / DisplayContainer.js 

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

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

Примечание:

  1. Извините, за длинный код. Но я подумал, что нужно понять проблему
  2. Фокус на Container Component с, connect, mapStateToProps, mapDispatchToProps. По моему мнению, проблема должна быть там.

1 Ответ

0 голосов
/ 30 апреля 2018

Ваш редуктор 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
...