Question

我是“新的反应”。我正在开发一个项目，我正在创建三个名为 India ， China ， Russia 的按钮。单击按钮，段落文本将更改。

为此，我为初始状态创建了4个演示组件，3个动作，1个缩减器和额外的缩减器。

我正在尝试通过select t2.*, (case when t2.col2d = 'Col1a' then sumcol1a when t2.col2d = 'Col1b' then sumcol1b when t2.col2d = 'Col1c' then sumcol1c when t2.col2d = 'Col1d' then sumcol1d end) as col2e from table2 t2 cross join (select sum(col1a) as sumcol1a, sum(col1b) as col1b, sum(col1c) as sumcol1c, sum(col1d) as col1d from table1 t1 ) t1;将文字发送到store到Presentational Component的段落。但是，它没有用。

我的代码如下：

index.js

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

减速器/ country.js

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

组件/ IndiaBtn.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;

components / ChinaBtn.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;

组件/ RussiaBtn.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;

components / display.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;

组件/ App.js

import React from 'react';

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

容器/ IndiaBtnContainer.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;

容器/ ChinaBtnContainer.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);

容器/ RussiaBtnContainer.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);

容器/ DisplayContainer.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);，Container Component，connect，mapStateToProps。据我说，问题必定存在。

Answer 1

您的reducer 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

Connect（）没有将状态从store传递给child

1 个答案: