useReducer代替Redux

创建state.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

?

1 2 3 4 5 6 7 8 9

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