I'm trying to figure out the best way to use redux with react hooks. I saw the following
How to use React hooks + Redux
However I'm not convinced this is the best way to go. Does anyone have any alternative ideas?
I also saw the following and seems quite good. https://www.npmjs.com/package/redux-react-hook
Thanks
The official react-redux
package provides hooks since v7.1. Redux hooks can be used instead of the connect(mapStateToProps, mapDispatchToProps)
function.
useSelector()
Extract data from the Redux store state using a selector function.
useDispatch()
Return a reference to dispatch that can be used to dispatch actions.
This is an example implementing a counter where the counter value is managed by 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>
);
}
As an alternative to redux you can use hooks to manage the state, you can create the similar using the combination of context api and custom hooks
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; }
then inside your component, you can any component
const { plan } = useAppState();
dispatch({ type: 'updateBusinessInfo', payload: { businessInfo: businessInfo, addOnsInfo: addOnsInfo } });
refer https://kentcdodds.com/blog/how-to-use-react-context-effectively fantastic post by kencdoods for details
At the time of writing this is still in alpha stage, if you want to try it update your react-redux to v7.1.0-alpha.4.
After doing this recently myself I posted this
How to connect redux store using useSelector() when input fields already mapped using useState()
Make sure you npm I react-redux@next
Cheers
Here is how to use Redux with Hooks in 3 simple steps : Counter example.
Source code: https://github.com/trackmystories/Redux-hooks-counter-app-with-axios.
NOTE: https://react-redux.js.org/introduction/getting-started
Step 1:
create a reducer.js file, define and combine your reducers:
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;
Step 2
Create a counter component which will access the state and render it to the view:
NOTE: please refer to "Redux Terms and Concepts" to get a better understanding of Actions, State and View. https://redux.js.org/tutorials/essentials/part-1-overview-concepts
You don't need to use connect mapStateToProps and dispatchStateToProps with redux hooks instead use { useDispatch, useSelector }.
We can pass the actions "ADD" and "SUBTRACT" inside of the button directly, without defining an action.js file.
CounterComponent.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> ) }
Step 3:
Lastly link your RootReducer to the createStore and pass it to the Provider.
App.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> </> ); };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.