Redux基本使用

一、创建store

/*store.js*/

import {createStore} from 'redux'
import countReducer from './count_reducer'

//暴露store
export default  createStore(countReducer)

二、创建reducer,作用：第一次store调用，初始化。 后面就是修改的时候调用

const countInit =0   //初始化
//专门为count生成的reducer函数，用来执行修改赋值的操作
export default function countReducer(preState = countInit,action){
    const {type,data} =action
    switch (type){
        case 'add':
            return preState + data
        default:
            return 0   //赋初始值
    }
        
}

三、页面上获取这个count用store.getState()

/*app.jsx*/

import store from '../../redux/store'
{store.getState()}

四、提交修改，建议用action提交

/*action.js*/
//同步
export  const addAction = data => ({type:'add',data})  

提交：如果需要改的话会提交到action， 比如要+1那么就提交addAction(1)这个接口， 参数就是data。 然后会找到action里面addAction函数，再提交到reducer根据不同的type做不同的操作。
修改流程

import React,{useState} from 'react'
import store from '../../redux/store'
import { addAction } from '../../redux/count_action';
export default function User() {

  //相当于munted，钩子这么玩 
  React.useEffect(()=>{
    store.subscribe(()=>{
      console.log(store.getState())
      //缺少更新，还没更新的
    })
  });

  function increment(){
    store.dispatch(addAction(1))
  }

  return (
    <div>
      <p>redux的使用</p>
      <p> {store.getState()}</p>
      <button onClick={increment}>store里面的数据增加</button>
    </div>
  )
}