[JavaScript知识库] 在原react项目中集成使用Redux（使用步骤总结）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 在原react项目中集成使用Redux（使用步骤总结） -> 正文阅读

[JavaScript知识库]在原react项目中集成使用Redux（使用步骤总结）

文章目录

前言

之前写的一个react项目，需要在里面使用Redux，记录一下实现的步骤

安装Redux

要在项目中使用，所以先来安装一下redux 和 react-redux

cnpm i -D redux react-r

这里是使用redux完成这个项目中菜单的一些功能，下面列举的新建文件相关的功能在之前文章有说明，这里就不叙述了

新建使用Redux的相关文件

在 src 目录下新建 store 文件夹用作仓库，
在store下新建文件：

1.新建contants.js进行定义一个名字

export const SWITCH_MENU = 'SWITCH_MENU'

2.新建index.js在里面进行创建：

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

const store = createStore(reducer)

export default store

3.新建action.js

import { SWITCH_MENU } from './contants'

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

4.新建reducer.js建立连接

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

全局使用Redux

想要全局使用，就需要使用Provider组件进行一个包裹
来到根目录src下的index.js文件：
先引入Provider和需要用到的store

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

然后使用 Provider 进行包裹，并将store传进去：

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

在导航页面进行使用，完成功能

来到nav文件夹下的index.js文件
引入 connect 和 switchMenuAction

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

在最下面调用connect，然后将Index传入进去（Index是这里使用的组件名）：

export default connect()(Index)

定义一个switchMenu函数：
调用dispatch在里面定义switchMenuAction并传入menuName，因为我们最终就是通过menuName进行展示

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

然后就直接在渲染的menu.item中定义点击事件，这样就能进行菜单的切换：

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