reduxはどのように倉庫の値を修正し、コンポーネントをコンテナコンポーネントとuiコンポーネントに分割するかを話します.

1,reduxはどうやって倉庫の値を修正しますか?
①store.dispatch({type:「XXX」,n:xxx])を先に配ってください.

dispatch({
     type:'XXX',key:value.....})

注:actionには必ずtypeがあります.他のパラメータもあります.typeはできるだけ大文字で、actionオブジェクトのtype値は絶対に重複しないでください.
②typeによってデータを修正する

	a.   state    
  b.   state     
  c.     state

var newState={
     ...state};  //   
newState.n=newState.n+action.p;  //  
console.log(newState.n)
return newState; //     

③subscribeモニタstoreにおけるデータの変化
subscribeパラメータはコールバック関数です.

store.subscribe(()=>{
     })

まとめ:コンポーネントのstore.dispatch-->reducer(type,action)->複本、修正、リターン–のコンポーネントの中でstore.getState()を通じて最新の値を取る(subscribe)
2,コンポーネントをuiコンポーネントとコンテナコンポーネントに分割する
UIコンポーネントは一般にレンダリングして、コンテナコンポーネントとstoreはつきあう.
UIコンポーネント:

class One extends Component {
     
    render() {
     
        let {
      n,dec,inc } = this.props
        return (
            <div>
                <button onClick={
     dec}>-</button>
                {
     n}
                <button onClick={
     inc}>+</button>
            </div>
        )
    }
}

コンテナコンポーネント:

class OneContainer extends Component {
     
    constructor(props) {
     
        super(props)
        this.state = {
     
            n: store.getState().n
        }
        //       
        store.subscribe(this.change)
    }
    // store                 
    change = () => {
     
        this.setState({
     
            n: store.getState().n
        })
    }
    dec() {
     
        store.dispatch(actionCreator.decAction(1))
    }
    inc() {
     
        store.dispatch(actionCreator.incAction(2))
    }
    render(){
     
        return <One n={
     this.state.n} inc={
     this.inc} dec={
     this.dec} />
    }
}