1
votes

Utilisation de redux avec des hooks de réaction

J'essaie de trouver la meilleure façon d'utiliser redux avec des hooks de réaction. J'ai vu ce qui suit

Comment utiliser les hooks React + Redux

Cependant, je ne suis pas convaincu que ce soit la meilleure voie à suivre. Quelqu'un a-t-il des idées alternatives?

J'ai également vu ce qui suit et semble assez bon. https://www.npmjs.com/package/redux-react-hook

Merci

javascript react-redux react-hooks redux

4 commentaires

react-redux v7.x obtiendra un hook officiel pour redux github.com/reduxjs/react-redux/releases/tag/...

redux-react-hook est un bon paquet ... vous pouvez lire la source entière en quelques minutes

J'ai également développé une abstraction sur redux qui utilise des hooks. github.com/ctrlplusb/easy-peasy

Après avoir fait cela récemment moi-même, j'ai posté ce stackoverflow.com/questions/56231851/ ... Assurez-vous que vous npm je réagis-redux @ next Cheers

3 Réponses :

0
votes

Au moment de la rédaction de cet article, il est encore en phase alpha, si vous voulez l'essayer, mettez à jour votre react-redux vers la v7.1.0-alpha.4.

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

0 commentaires

2
votes

Le paquet officiel react-redux fournit des hooks depuis la v7.1. Les hooks Redux peuvent être utilisés à la place de la fonction connect(mapStateToProps, mapDispatchToProps) .

`useSelector()`

Extrayez les données de l'état du magasin Redux à l'aide d'une fonction de sélection.

`useDispatch()`

Renvoyez une référence à l'envoi qui peut être utilisée pour expédier des actions.

Voici un exemple d'implémentation d'un compteur où la valeur du compteur est gérée par 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

0 commentaires

1
votes

vous n'avez pas besoin d'utiliser redux avec des hooks pour gérer l'état, vous pouvez créer le même en utilisant la combinaison de l' API contextuelle et des hooks personnalisés

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

puis à l'intérieur de votre composant, vous pouvez n'importe quel composant

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

référez-vous à https://kentcdodds.com/blog/how-to-use-react-context-effectivement article fantastique de kencdoods pour plus de détails

0 commentaires