useReducer代替Redux

创建state.js

import React, { createContext,useContext,useReducer } from 'react';

export const countText = createContext({})
export const updateCount = 'updateCount'
const reducer = (state,avtion) => {
  switch (avtion.type) {
    case 'updateCount':
      return avtion.count;
    default:
      return state
  }
}
export const Count = (props) => {
  const [count,dispatch] = useReducer(reducer,0)
  console.log(count,dispatch)
    return (
      <countText.Provider value={{count,dispatch}}>
        {props.children}
      </countText.Provider>
    )
}

　　index.js

import React, { useContext,useReducer } from 'react';
import {countText,updateCount} from './state'

function Clicks () {
  console.log(useContext(countText))
  const {dispatch,count} = useContext(countText)
  // console.log(dispatch)
  return (
    <div>
        <h2>点击{useContext(countText).count}</h2>
        <button onClick={() => {dispatch({type:updateCount,count:count+1})}}>点击</button>
    </div>
  )
}
export default Clicks

　　index2.js

import React, { useState,useContext,createContext } from 'react';
import {countText} from './state'

// const a =createContext(context)
function Index () {
  // console.log(children)
  return <div>{useContext(countText).count}</div>
}
export default Index