Redux don't render the content of store - reactjs

Question

I'm trying to render the store's value on view, but it don't render. I don't know why it is not rendering. Can someone explain me why ? (I have watched Dan Abramov's course on Egg Head and I still not understanding)
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
const reducer = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
console.log('Increment', state);
return ++state;
case 'DECREMENT':
console.log('Decrement', state);
return --state;
default:
return state;
}
}
const store = createStore(
reducer
)
class App extends Component {
render() {
return (
<div>
<p>{JSON.stringify(this.props.store)}</p>
<button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>
<button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
</div>
);
}
}
ReactDOM.render(
<App store={store} />,
document.getElementById('root')
);

Answer 1

Use Redux Connect to access state in component
ex:
export default connect(mapStateToProps, actions)(yourComponent);

Answer 2

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
const reducer = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
console.log('Increment', state);
return ++state;
case 'DECREMENT':
console.log('Decrement', state);
return --state;
default:
return state;
}
}
const store = createStore(
reducer
);
class App extends Component {
update() {
this.forceUpdate();
}
componentDidMount(){
this.unsubscribe = store.subscribe(this.update.bind(this));
}
componentWillUnmount(){
this.unsubscribe();
}
render() {
return (
<div>
<p>{JSON.stringify(store.getState())}</p>
<button onClick={() => store.dispatch({type: 'INCREMENT'})}>+</button>
<button onClick={() => store.dispatch({type: 'DECREMENT'})}>-</button>
</div>
);
}
}
export default App;

Answer 3

check this
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
const store = createStore(
reducers,
applyMiddleware(reduxThunk)// not needed
);
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.querySelector('#root')
);
App component
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
class Signout extends Component {
componentDidMount() {
console.log(this.props.data);
}
render() {
return <div>Sorry to see you go</div>;
}
}
function mapStateToProps(state) {
return { data: state.data};
}
export default connect(mapStateToProps, actions)(App);

Answer 4

You shouldn't mutate the state directly. Instead do like this:
return state + 1; // instead of ++state
return state - 1; // instead of --state
To render the state:
class App extends Component {
render() {
return (
<div>
<p>{store.getState()}</p>
To get the changes of the store, you will also need to subscribe for the changes:
const unsubscribe = store.subscribe( // generally, this is called on event handler
ReactDOM.render(
<App store={store} />,
document.getElementById('root')
)
)
unsubscribe()
You may also subscribe the changes in componentDidMount and unsubscribe in the componentWillUnmount lifecycle hook. You may look at the answer provided by henok tesfaye: subscribing and unsubscribing in lifecycle.
You can read it from the docs to know more about it.
But in general, we don't need subscriber. We can get the changes through mapping the states using connect. This blog explains it very well. So, I would suggest you to look at Usage with react