如何用 React Hooks API 替换 redux reducer 和 thunk答案

【问题标题】：How to replace redux reducers and thunks with React Hooks API如何用 React Hooks API 替换 redux reducer 和 thunk
【发布时间】：2021-06-03 10:08:52
【问题描述】：

我接到了一个项目，并被告知尽可能使用React Hooks 而不是Redux。是否可以用 React Hooks 替换下面的 reducer 和 thunk？值得更换吗？

reducers/index.js

import { combineReducers } from 'redux'
import {createActions, createReducer, Types as ReduxSauceTypes} from 'reduxsauce'
import { reducer as ProfileReducer } from '@Reducers/Profile'

const appReducer = combineReducers({
    profile: ProfileReducer,
    // other reducers
})

const { Types, Creators: Actions } = createActions({
    resetApp: []
})

const rootReducer = createReducer([], {
    [Types.RESET_APP]: (state, action) => {
        return appReducer(undefined, action)
        //Passing undefined as state will make all the reducers using their initial states.
    },
    [ReduxSauceTypes.DEFAULT]: (state, action) => {
        return appReducer(state, action)
    }
})

const resetReduxStore = () => {
    return dispatch => {
        dispatch(Actions.resetApp())
    }
}

export { rootReducer, resetReduxStore }

Reducers/Profile/index.js

import { createActions, createReducer } from 'reduxsauce';
export { default as thunks } from './thunks.js';

/* ------------- Initial State ------------- */
export const INITIAL_STATE = {
    user: {},
};

/* ------------- Types and Action Creators ------------- */
export const { Types, Creators } = createActions({
    setUser        : ['user'],
});

/* ------------- Hookup Reducers To Types ------------- */
export const reducer = createReducer(INITIAL_STATE, {
    [Types.SET_USER]: (state, { user }) => {
        return {
            ...state,
            user
        };
    },
});

export default Creators;

【问题讨论】：

您的'./thunks.js' 文件中还有更多内容吗？我只是在这里看到一个 thunk。

标签： react-native react-redux redux-thunk

【解决方案1】：

“值得吗？”见仁见智，但我会给出我的意见。

回复：useReducer

React 现在有一个useReducer hook，允许您通过调度操作来更新状态。你可以使用你已经拥有的相同的减速器。默认情况下，useReducer 只管理它所在组件的状态。它不附带上下文提供程序。您可以创建自己的上下文，但此时您正在重新创建 Redux。

我的意见：如果您声明它已本地化到您的应用程序的一部分，请使用 React useReducer 挂钩。将 reducer 保存在某个组件中，并通过 props 传递回调和值。如果你的 state 本质上是全局的，那么请使用 Redux。

回复：使用状态

您询问是否可以更换减速器。正如我所说，useReducer 钩子将使用相同类型的减速器，因此您不会替换它。也许您需要问的问题是我需要一个类似 reducer 的系统来更新这个状态吗？

我的意见：您在此处发布的代码非常简单，非常适合作为基本的useState 钩子。

const [user, setUser] = useState();

您可以将它与上下文提供程序和useContext 挂钩结合使用，以获得全局配置文件状态。如果你开始有多个状态的多个上下文——那就是你想使用 Redux 的时候。

const UserContext = React.createContext([
  undefined, // user
  () => {} // setUser
]);

// takes no `value` because the state is internal
export const UserProvider = ({children}) => {
  const [user, setUser] = React.useState<MaybeUser>();

  return (
    <UserContext.Provider value={[user, setUser]}>
      {children}
    </UserContext.Provider>
  )
}

export const useUser = () => useContext(UserContext);

在某些组件中的使用：

const Test = () => {
  const [user, setUser] = useUser();
  ...
}

回复：谢谢

Thunk 是 dispatch 的函数，因此如果使用 Redux，可以使用 useDispatch 挂钩轻松重写它们。您可以使用 useSelector 挂钩代替 thunk 的 getState() 参数。

有很多方法可以使用钩子替换 thunk。但是这里唯一的 thunk 是您的 resetReduxStore，它真的不需要是 thunk。

【讨论】：