[英]Using redux with react hooks
我試圖找出將 redux 與 react hooks 一起使用的最佳方法。 我看到了以下內容
但是,我不相信這是最好的方法。 有沒有人有任何替代想法?
我也看到了以下內容,似乎還不錯。 https://www.npmjs.com/package/redux-react-hook
謝謝
官方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>
);
}
作為 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精彩帖子
在撰寫本文時,它仍處於 alpha 階段,如果您想嘗試將 react-redux 更新到 v7.1.0-alpha.4。
以下是如何通過 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> </> ); };
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.