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.
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>
</>
);
};
redux-react-hookis a good package... you can read the entire source in a few minutes