Я думаю о том, чтобы избавиться от redux в моих приложениях и использую только контекстный интерфейс реагирования. Для этого мне нужно иметь промежуточное программное обеспечение для обработки HTTP-запросов (похоже на redux-saga ). Я написал следующее, но я не уверен, что это действительно хороший подход:

Вот мой Context Reducer:

 export const initialState = { isAuthenticated: false, user: null, token: null, }; export const reducer = (state, action) ={amp}gt; { switch (action.type) { case "LOGIN": localStorage.setItem("user", JSON.stringify(action.payload.user)); localStorage.setItem("token", JSON.stringify(action.payload.token)); return { ...state, isAuthenticated: true, user: action.payload.user, token: action.payload.token } case "LOGOUT": localStorage.clear(); return { ...state, isAuthenticated: false, user: null, token: null } case "TEST": console.log("works") break default: return state; } } export const AuthContext = React.createContext() 

любое промежуточное программное обеспечение, которое я написал:

 export const applyApiMiddleware = dispatch ={amp}gt; action ={amp}gt; { dispatch(action) switch (action.type) { case "TEST": console.log("test") dispatch({ type: 'TEST', payload: { data: "foo" } }) break case "REQUEST_GET_USERS": fetch('/users', { method: 'GET' }) .then(res ={amp}gt; dispatch({ type: 'REQUEST_GET_USERS_SUCCESS', payload: res.data })) .catch(error ={amp}gt; console.warn(error)) break default: console.log("DEFAULT") //.... } } 

И мой app.js:

 export const App = (props) ={amp}gt; { const [state, dispatch] = React.useReducer(reducer, initialState); const Routes = props.routes const apiDispatch = applyApiMiddleware(dispatch) return ( {amp}lt;AuthContext.Provider value={{state, apiDispatch}}{amp}gt; {amp}lt;div className="container"{amp}gt; {amp}lt;div className="row"{amp}gt; {amp}lt;div className="col-4"{amp}gt; {props.title} {amp}lt;/div{amp}gt; {amp}lt;div className="col-4"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="col-4"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;Routes history={history}/{amp}gt; {!props.authenticated ? {amp}lt;Redirect to="/login" push /{amp}gt; : ''} {amp}lt;/div{amp}gt; {amp}lt;/AuthContext.Provider{amp}gt; ) } 

Я сейчас называю действия так:

 const { apiDispatch } = React.useContext(AuthContext) apiDispatch({ type: "TEST" }) 

Кажется, все работает нормально и так, как я ожидал, но каковы ваши предложения? Одна проблема, о которой я думаю, — как применить несколько промежуточных программ таким образом? Я также как-то пропускаю что-то вроде вызова next() (что кажется обязательным для нескольких промежуточных программ).