redux理解

单向数据流 组件派发action
store把上一次状态 和action 传给reducer – 作用是返回新状态
最后反馈到组件上

store仓库中 内容和管理数据的方法
reducers是一些方法 初始参数里面是数据

修改reducer也就是返回一个新值
不能直接修改 根据原有的返回新的值

import React, { Component } from 'react'

import storeContext from '../context/store_context'

export default class Counter extends Component {
  state = {
    counter: 0
  }

  static contextType = storeContext

  increment = () => {
    this.context.dispatch({
      type: 'increment'
    })
    console.log(this.context.getState())
  }

  componentDidMount () {
    console.log(this.context)
    this.context.subscribe(() => {
      this.setState({
        counter: this.context.getState().counter
      })
    })
  }

  render() {
    return (
      <div>
        {this.state.counter}
        <button onClick={this.increment}>+</button>
      </div>
    )
  }
}

import React, { Component } from 'react'

import store from '../redux/counter/store'

export default class Counter1 extends Component {
  componentDidMount() {
    store.subscribe(() => {
      this.forceUpdate()
    })
  }
  render() {
    return (
      <div>
        {store.getState().counter}
      </div>
    )
  }
}