Integre y use Redux en el proyecto de reacción original (resumen de los pasos de uso)

prefacio

Un proyecto de reacción escrito anteriormente, debe usar Redux en él y registrar los pasos de implementación

Instalar redux

Para ser utilizado en el proyecto, primero instalemos redux y react-redux

cnpm i -D redux react-r

Aquí se usa redux para completar algunas funciones del menú en este proyecto. Las funciones relacionadas con el nuevo archivo que se enumeran a continuación se describen en el artículo anterior y no se describirán aquí.

Crear nuevos archivos relacionados con el uso de Redux

Cree una nueva carpeta de tienda en el directorio src para usar como almacén
y cree un nuevo archivo en la tienda:

1. Cree un nuevo content.js para definir un nombre

export const SWITCH_MENU = 'SWITCH_MENU'

2. Cree un nuevo index.js dentro:

import {
    
     createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

3. Nueva acción.js

import {
    
     SWITCH_MENU } from './contants'

export const switchMenuAction = menuName => ({
    
    
    type: SWITCH_MENU,
    menuName
})

4. Cree un nuevo reducer.js para establecer una conexión

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

Usa Redux globalmente

Si desea usarlo globalmente, debe usar el componente Proveedor para un paquete
. Vaya al archivo index.js en el directorio raíz src:
primero introduzca el Proveedor y la tienda que necesita usar

import {
    
     Provider } from 'react-redux'
import store from './store'

Luego use Provider para envolverlo y pasar la tienda:

ReactDOM.render(
  <Provider store={
    
    store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Úselo en la página de navegación para completar la función.

Vaya al archivo index.js en la carpeta de navegación e
introduzca connect y switchMenuAction

import {
    
     connect } from 'react-redux'
import {
    
     switchMenuAction } from '../../store/action'

Llame a connect en la parte inferior y luego pase el Índice (Índice es el nombre del componente que se usa aquí):

export default connect()(Index)

Defina una función switchMenu:
llame a dispatch para definir switchMenuAction y pase menuName, porque finalmente lo mostraremos a través de menuName

switchMenu(menuName) {
    
    
    const {
    
     dispatch } = this.props
    dispatch(switchMenuAction(menuName))
}

A continuación, defina el evento de clic directamente en el elemento de menú renderizado, de modo que se pueda cambiar el menú:

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

Al final

Bueno, este artículo ha terminado, principalmente sobre cómo integrar y usar redux en proyectos existentes. Aproximadamente resumido en los siguientes pasos:

1. Paquete de guía para instalar redux
2. Cree un nuevo archivo relacionado con el almacén y defínalo para crear un enlace
3. usar donde sea necesario

Si no tiene claro los conceptos básicos de redux, puede leer los artículos anteriores:
Explicación detallada del uso básico de Redux (el concepto de función pura)
Uso de Redux en el combate real del proyecto de reacción (explicación del caso)