Connect() is not passing state from store to child - reactjs

Question

I am "new to react". I am working on a project where I am creating three buttons named as India, China, Russia. On button click, text of paragraph changes.
For this, I have created 4 Presentational Components, 3 actions, 1 reducer and extra reducer for initial state.
I am trying to send text to paragraph, from store to Presentational Component via connect(). However, it's not working.
My code is as following:
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')
);
actions/index.js
export const india = text => ({
type: 'INDIA',
text
});
export const china = text => ({
type: 'CHINA',
text
});
export const russia = text => ({
type: 'RUSSIA',
text
});
reducers/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;
components/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;
components/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;
components/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;
components/display.js
import React from 'react';
const display = ({ text }) => {
return <div style={{ padding: '16px' }}>{text}</div>;
};
export default display;
components/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;
containers/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);
containers/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);
containers/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);
containers/DisplayContainer.js
import { connect } from 'react-redux';
import display from '../components/display';
const mapStateToProps = state => ({
text: state.text
});
export default connect(mapStateToProps)(display);
Note:
Sorry, for long code. But, I thought it is necessary to understand problem
Focus on Container Components, connect, mapStateToProps, mapDispatchToProps. According to me, problem must be there.

Answer 1

Your reducer returns an array and hence mapStateToProps isn't giving you right values since you expect the state to be an object, what you need is
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