CODEWITHSUNDEEP
reactjsredux
gruss
gruss

Reputation: 65

React + Redux Example. Object are not valid as a React child

I am having trouble getting a simple React and Redux example working and need some help please. I am receiving the following error as soon as I attempt to dispatch the incrementNumber action. I will paste my code in below. Or you can use the Github link here. Thanks in advance!

enter image description here

index.js (App root)

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/configureStore';

import App from './containers/App';

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

configureStore.js

import { createStore } from 'redux';
import rootReducer from '../reducers';

export default createStore(rootReducer);

index.js (root reducer)

import { combineReducers } from 'redux';
import numbersReducer from './numbersReducer';

const rootReducer = combineReducers({
    number: numbersReducer
});

export default rootReducer;

numbersReducer.js

import initialState from './initialState';

export default function numbersReducer(state = initialState.number, action) {
    switch (action.type) {
        case "INCREMENT_NUMBER":
            return { ...state, number: state.number + 1 }
        default:
            return state;
    }
}

initialState.js

export default {
    number: 0
}

App.js

import React from 'react';
import { connect } from 'react-redux';
import { incrementNumber } from '../actions/appActions';

export class App extends React.Component {

    componentDidMount() {
        this.props.dispatch(incrementNumber(1));
    }

    render() {
        return (
            <div>
                Current number: {this.props.number}
            </div>
        );
    }
}

const mapStateToProps = state => ({
    number: state.number
});

export default connect(mapStateToProps)(App);

appActions.js

export function incrementNumber(number) {
    return { type: "INCREMENT_NUMBER", number}
}

Upvotes: 1

Views: 3626

Answers (2)

Wasi
Wasi

Reputation: 1

const rootReducer = combineReducers({
    number: numbersReducer
});

In combineReducers argument object, "number" can't be property. Because numbersReducer already have this property "number" in it's initialState.

Upvotes: 0

Aditya Parmar
Aditya Parmar

Reputation: 1179

<div>
         Current number: {this.props.number.number}
</div>

and also change this.

export default function numbersReducer(state = initialState, action) {
    switch (action.type) {
        case "INCREMENT_NUMBER": {

            return { ...state, number: state.number + 1 }
        }
        default:
            return state;
    }
}

/* state = initialState */

Upvotes: 1

Related Questions