Question

我正在尝试创建一个React应用程序，并且我对钩子和新的上下文API较新，我通常在项目中使用redux，但是我想在此项目中尝试使用上下文API和钩子，但是我在一些上下文概念方面感到困惑API。我唯一需要的是像redux这样的getState函数，我曾尝试过使用reducers;

import MainContext from '../contexts/mainContext';

const initialState = {
localMember:null,
remoteMember:null,
signedIn:false,
videoPermission: true,
audioPermission: true,
selectedGender:0,
connecting:false,
};    

const reducer = (state,action) => {
switch(action.type) {
    case constants.SET_STATE:{
        console.log(action.payload);
        return {...state,...action.payload}
    }
    case constants.UPDATE_LOCAL_MEMBER:{
        return {...state, localMember:{...state.localMember,...action.payload} }
    }
    default:
        return state;
}
}; 

const ProviderComponent = () => {

const [state,dispatch] = React.useReducer(reducer,initialState);

const value = {
    dispatch:dispatch,
    getState:() => state
};
Provider Component

<MainContext.Provider value={value}>
        {children}
</MainContext.Provider>
}

const SubComponent = () => {

const {getState,dispatch} = useContext(MainContext);

useEffect( ()=> {
    SocketClient.install({getState,dispatch});
},  [init]);

return <div>component<div>;
}

和useContext钩子获取当前状态和getState函数，并在通过useEffect钩子安装组件并将该函数存储在该类中并试图通过调用该函数进入状态时将该函数作为类的参数传递给Class，但是我不知道当前状态状态，状态总是和初始状态相同。我该如何使用redux store的getState函数来实现我们的目标

React Context访问组件之外的当前状态

0 个答案: