Annuaire d'articles
avant-propos
Un projet de réaction écrit auparavant, vous devez y utiliser Redux et enregistrer les étapes de mise en œuvre
Installer Redux
Pour être utilisé dans le projet, installons d'abord redux et react-redux
cnpm i -D redux react-r
Voici comment utiliser redux pour compléter certaines fonctions du menu dans ce projet. Les fonctions liées au nouveau fichier listé ci-dessous sont décrites dans l'article précédent, et ne seront pas décrites ici.
Créer de nouveaux fichiers liés à l'utilisation de Redux
Créez un nouveau dossier de magasin dans le répertoire src à utiliser comme entrepôt,
et créez un nouveau fichier sous store :
1. Créez un nouveau content.js pour définir un nom
export const SWITCH_MENU = 'SWITCH_MENU'
2. Créez un nouveau index.js à l'intérieur :
import {
createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
3. Nouvelle action.js
import {
SWITCH_MENU } from './contants'
export const switchMenuAction = menuName => ({
type: SWITCH_MENU,
menuName
})
4. Créez un nouveau reducer.js pour établir une connexion
import {
SWITCH_MENU } from './contants'
const initState = {
menuName: '首页'
}
const reducer = (state = initState, action) => {
switch(action.type) {
case SWITCH_MENU:
return {
...state, menuName: action.menuName}
default:
return state
}
}
export default reducer
Utiliser Redux globalement
Si vous souhaitez l'utiliser globalement, vous devez utiliser le composant Provider pour un package
. Allez dans le fichier index.js dans le répertoire racine src :
introduisez d'abord le fournisseur et le magasin que vous devez utiliser.
import {
Provider } from 'react-redux'
import store from './store'
Utilisez ensuite le fournisseur pour l'envelopper et transmettre le magasin :
ReactDOM.render(
<Provider store={
store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Utilisez-le sur la page de navigation pour compléter la fonction
Accédez au fichier index.js dans le dossier nav et
introduisez connect et switchMenuAction
import {
connect } from 'react-redux'
import {
switchMenuAction } from '../../store/action'
Appelez connect en bas, puis transmettez l'Index (Index est le nom du composant utilisé ici) :
export default connect()(Index)
Définissez une fonction switchMenu :
appelez dispatch pour définir switchMenuAction et passez menuName, car nous l'affichons finalement via menuName
switchMenu(menuName) {
const {
dispatch } = this.props
dispatch(switchMenuAction(menuName))
}
Définissez ensuite l'événement click directement dans le rendu menu.item, afin que le menu puisse être commuté :
getMenuItem = (data) => {
// console.log(data)
return data.map(item => {
if (item.children) {
return <SubMenu key={
item.key} title={
item.title}>
{
this.getMenuItem(item.children)}
</SubMenu>
} else {
return <Menu.Item key={
item.key} title={
item.title}
onClick={
e => this.switchMenu(item.title)}>
<Link to={
item.key}>{
item.title}</Link>
</Menu.Item>
}
})
}
Enfin
Eh bien, cet article est terminé, principalement sur la façon d'intégrer et d'utiliser redux dans des projets existants. Grosso modo dans les étapes suivantes :
- Paquet de guide pour installer redux
- Créer un nouveau fichier lié à l'entrepôt et le définir pour créer un lien
- utiliser là où c'est nécessaire
Si vous n'êtes pas clair sur les bases de redux, vous pouvez lire les articles précédents :
Explication détaillée de l'utilisation de base de Redux (le concept de fonction pure)
Utilisation de Redux dans le combat réel du projet react (explication de cas)