react中useContext與useReducer 代替 redux

1.useContext與useReducer

主要思想：
1.使用redux的action以及dispatch方法將數據存在一個組件中；
2.使用createContext,useContext進行父子組件傳值;

 

import React ,{  }from 'react';
import { Content } from './content'
import { Color } from './color'
//index頁面
export const Index =()=>{
    return(
        <div>
              {/* Color組件作為父組件作為包裹 */}
            <Color>
              {/* 注意父子關系才能使用 */}
                <Content />
            </Color>
            
        </div>
    )
}

//起存儲數據的redux頁面，父組件
import React ,{ createContext,useReducer } from 'react';
export const Context = createContext({})
 {/* reducer作為變量而不是函數*/}
const reducer = (state,action)=>{
    switch (action.type){
        case 'update_color':
            return action.color
        default :
            return 'purple'
    }
}
export const Color =props=>{
 {/* props是指包含子組件的結構 */}
    const [color,dispatch] = useReducer(reducer,'purple')
    return (
        <Context.Provider value={{color,dispatch}}>
            {props.children}
        </Context.Provider>
    )
}

//操作數據的子組件
import React ,{ useState ,useContext }from 'react';
import { Context } from './color'
export const Content =()=>{
     {/* 這里是對象，不是數組，value是對象 */}
    const {color,dispatch} = useContext(Context)
    return(
        <div>
            <p style={{color:color}}>字體顏色是：{color}</p>
            <button onClick={()=>{dispatch({type:'update_color',color:'green'})}}>green</button>&nbsp;
            <button onClick={()=>{dispatch({type:'update_color',color:'red'})}}>red</button>
        </div>
    )
}

 

作者：start_zjj
鏈接：https://www.jianshu.com/p/99d7b07ff711
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。