使用带有反应钩子的 redux

Question

我试图找出将 redux 与 react hooks 一起使用的最佳方法。 我看到了以下内容

如何使用 React hooks + Redux

但是，我不相信这是最好的方法。 有没有人有任何替代想法？

我也看到了以下内容，似乎还不错。 https://www.npmjs.com/package/redux-react-hook

谢谢

Answer 1

官方react-redux包从 v7.1 开始提供钩子。 可以使用 Redux 钩子代替connect(mapStateToProps, mapDispatchToProps)函数。

useSelector()

使用选择器函数从 Redux 存储状态中提取数据。

useDispatch()

返回可用于调度操作的调度引用。

这是一个实现计数器的示例，其中计数器值由 Redux 管理。

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'

export const CounterComponent = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);

  return (
    <div>
      <span>{counter}</span>
      <button onClick={() => dispatch({ type: 'INCREMENT_COUNTER' })}>
        Increment counter
      </button>
    </div>
  );
}

来源： https : //react-redux.js.org/api/hooks

Answer 2

作为 redux 的替代方案，您可以使用钩子来管理状态，您可以使用上下文 api和自定义钩子的组合来创建类似的

 const initialState = { stateSet: false, plan: { } } const AppReducer = (state = initialState, action) => { return { plan: planReducer(state.plan, action) } } const AppProvider = (props) => { const [state, dispatch] = useReducer(AppReducer, initialState); return ( <AppStateContext.Provider value={state}> <AppDispatchContext.Provider value={dispatch}> {props.children} </AppDispatchContext.Provider> </AppStateContext.Provider> ) } const useAppState = () => { const context = React.useContext(AppStateContext); return context; } const useAppDispatch = () => { const context = React.useContext(AppDispatchContext); return context; }

然后在您的组件中，您可以使用任何组件

const { plan } = useAppState();
 dispatch({ type: 'updateBusinessInfo', payload: { businessInfo: businessInfo, addOnsInfo: addOnsInfo } });

有关详细信息，请参阅 kencdoods 的https://kentcdodds.com/blog/how-to-use-react-context-effectively精彩帖子

Answer 3

在撰写本文时，它仍处于 alpha 阶段，如果您想尝试将 react-redux 更新到 v7.1.0-alpha.4。

https://react-redux.js.org/next/api/hooks#hooks

Answer 4

最近我自己做了这个之后，我发布了这个

当已经使用useState（）映射输入字段时，如何使用useSelector（）连接redux存储

确保您npm I react-redux @ next

干杯

Answer 5

以下是如何通过 3 个简单步骤将 Redux 与 Hooks 结合使用：反例。

源代码： https : //github.com/trackmystories/Redux-hooks-counter-app-with-axios。

注意： https : //react-redux.js.org/introduction/getting-started

第1步：

创建一个 reducer.js 文件，定义并组合你的 reducer：

减速器.js

 import { combineReducers } from "redux"; const counter = (state = 0, action) => { switch (action.type) { case "ADD": return state + 1; case "SUBTRACT": return state - 1; default: return state; } }; const rootReducer = combineReducers({ counter // additional reducers ... }); export default rootReducer;

第2步

创建一个计数器组件，它将访问状态并将其呈现给视图：

注意：请参阅“Redux 术语和概念”以更好地理解 Actions、State 和 View。 https://redux.js.org/tutorials/essentials/part-1-overview-concepts

您不需要使用带有 redux 钩子的连接 mapStateToProps 和 dispatchStateToProps 而是使用 { useDispatch, useSelector }。

我们可以直接在按钮内部传递动作“ADD”和“SUBTRACT”，而无需定义 action.js 文件。

计数器组件.js

 import React from "react"; import { useDispatch, useSelector } from "react-redux"; export default function CounterComponent() { const dispatch = useDispatch(); // dispatct action "ADD","SUBTRACT". const counter = useSelector((state) => state.counter); // your apps state. return ( <div> // dispatch "SUBTRACT" <button onClick={() => dispatch({ type: "SUBTRACT",})}> SUBTRACT <button> // pass the current state <text> display count : {counter}</text> // dispatch "ADD" <button onClick={() => dispatch({ type: "ADD",})}> ADD <button> </div> ) }

第 3 步：

最后将您的 RootReducer 链接到 createStore 并将其传递给 Provider。

应用程序.js

 import React from 'react'; import { Provider } from "react-redux"; import { createStore } from "redux"; import CounterComponent from './CounterComponent.jsx'; // import your reducers import rootReducer from "./reducers"; // link your reducers to the store const store = createStore(rootReducer); // Pass your store to the Provider wrapping your Component. export default function App() { return ( <> <Provider store={store}> <CounterComponent/> </Provider> </> ); };