React redux

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

// React component
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}

class Counter2 extends Component {
  render() {
    const { counter2 } = this.props
    return (
      <div>
        <span>{counter2}</span>

      </div>
    )
  }
}

Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired
}

// Action
const increaseAction = { type: 'increase' }

// Reducer
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    default:
      return state
  }
}

// Store
const store = createStore(counter)

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// Connected Component
const Page1 = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

const Page2 = connect(
  (state) => ({counter2: state.count}),
  (dispatch)=>{}
)(Counter2)

ReactDOM.render(

    <Provider store={store}>
    <Page1 />
    <Page2/>
  </Provider>,

  
  document.getElementById('root')
)

React Props具有不可更改性，只有有状态组件的自己的state才能改，但是React推崇无状态组件，可以通过Redux映射全局状态到某一个组件，组件内通过调用函数的方式改变全局的store的数据。
Provider让所有组件都可以得到 state 数据
connect映射props的属性到全局store存储的属性
mapDispatchToProps映射组件的函数到 store.dispatch方法
store.dispatch会调用自己写的Reduce方法，这个方法是用来处理要改什么状态数据

不需要手动store.subscribe就可以数据变化触发更新UI

只用redux而不用redux-react则需要手动subscribe 更新ui