CODEWITHSUNDEEP
javascriptreduxreact-reduxreact-hooks
tmp dev
tmp dev

Reputation: 9193

Using redux with react hooks

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

Upvotes: 2

Views: 1718

Answers (4)

Ali Shirazee
Ali Shirazee

Reputation: 1118

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>
    </>
  );
};

Upvotes: 0

Atishay Baid
Atishay Baid

Reputation: 337

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

Upvotes: 2

Hugodby
Hugodby

Reputation: 1183

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>
  );
}

Source: https://react-redux.js.org/api/hooks

Upvotes: 2

Thomas Valadez
Thomas Valadez

Reputation: 1747

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.

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

Upvotes: 0

Related Questions