Can't render simple JSON's content in React-Redux - reactjs

Question

I'm trying to use React-Redux to render the content of a small JSON.
I'm able to get the content via an Action :
(part of actions.js)
export const getUsersCount = () => {
return function (dispatch, getState) {
connectBack.get('users/count', {
headers: {
'Authorization': getState().current_user.token
}
})
.then( response => {
console.log(response.data)
dispatch(countUsers(response.data))
})
.catch( error => {
console.log('Count ', error)
})
}
}
export const countUsers= (users) => {
return {
type: 'COUNT_USERS',
payload: users
}
}
The console will correctly render the content of response.data (in this case : {users: 6}).
Then I want to render it on a simple page but it's undefined, I'm missing something...
import React from 'react'
import { connect } from 'react-redux'
import { getUnfulfilledCount, getUsersCount } from './../../tools/actions'
class Dashboard extends React.Component {
render () {
let statsUsers = this.props.usersCount()
console.log(statsUsers)
return(
<div className="container">
<div className="row">
Dashboard <br/>
Number of registered users: <br/>
{statsUsers}
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
usersCount: () => { dispatch(getUsersCount()) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)
In addition to it, I've got the reducer set as follow:
import * as actionTypes from './actionTypes'
const initialState = {
users:[]
}
const reducer = (state = initialState, action ) => {
switch (action.type) {
case actionTypes.COUNT_USERS:
return {
...state,
users: action.payload
}
Where actionTypes.js is :
export const COUNT_USERS = 'COUNT_USERS'
The exact render from the console :
undefined Dashboard.js:12
{users: 6} actions.js:315
Obviously on the display the variable is just skipped as statsUsers is undefined:
"Number of registered users:"

Answer 1

I think your main problem lies in how you are mapping the resultant data back to the Dashboard component. You have a call to mapStateToProps that is empty, and a call to mapDispatchToProps that isn't necessary. I would remove the latter, and map the users property from the store in the props where you can access it in the Dashboard component, then render this.props.users instead.
Also note that by having your render function call usersCount, which maps to a call to dispatch(getUsersCount()), you're making an API call inside your render function. Making API calls while rendering is kind of a big no-no, and should be done in another place like componentDidMount.
See working Codepen here. It rewrites a little bit of your code, and adds a feature of an emulated delayed network response.

Answer 2

Code not enough for understand, Maybe this example will help you.
const myJsonData = [
{0: {name: "Amoos John Ghouri"}},
{1: {name: "GMK Hussain"}},
{2: {name: "Talib Hussain"}}
];
class DemoApp extends React.Component {
render() {
const items = this.props.myJsonData.map((d,i) => (<li>{d[i].name}</li>));
return (
<div>
<ul>
{items}
</ul>
</div>
)
}
}
ReactDOM.render(
<DemoApp myJsonData={myJsonData} />,
DemoAppDiv
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="DemoAppDiv"></div>