Home>

I am making a count up function with React + Redux, but I am addicted to it.

In connect (mapStateToProps, mapDispatchToProps) (App) described in App.js
I am getting the state and action function, but the values ​​are not updated even when I dispatch.

It seems that the execution of the action function itself is done, so I feel that it is stumbled when passing the action to the reducer, but the cause is unknown.

If anyone knows the cause, could you point it out?

import React from 'react';
import ReactDOM from 'react-dom';
import {store} from './store'
import {Provider} from 'react-redux'
import App from './App';
ReactDOM.render (
  <Provider store = {store}>
    
  </Provider>,
  document.getElementById ('root')
);
import React from 'react'
import {increment, decrement} from './store'
import {connect} from 'react-redux'
class App extends React.Component {
  constructor (props) {
    super (props);
  }
  render () {
    return (
      <>
        <p>{this.props.counter}</p>
        <button onClick = {this.props.increment}></button>
      </>
    )
  }
}
const mapStateToProps = state =>{
  return {
    counter: state.counter
  }
}
const mapDispatchToProps = dispatch =>{
  return {
    increment: () =>{dispatch (increment ())},
    decrement: () =>{dispatch (decrement ())}
  }
}
export default connect (mapStateToProps, mapDispatchToProps) (App);
import {createStore} from 'redux'
const initialState = {
    counter: 0
}
function reducer (state = initialState, action) {
    switch (action.type) {
        case'increment ':
            return state.counter + 1
        case 'decrement':
            return state.counter-1
        default:
            return state
    }
}
export const increment = () =>{
    return {
        type: 'increment',
    }
}
export const decrement = () =>{
    return {
        type: 'decrement',
    }
}
export const store = createStore (reducer)