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

最后

好了本篇文章就到此结束了，主要讲了如何在已有项目中集成使用redux。大概总结下就以下步骤：

导包安装redux
新建仓库相关的文件并进行定义创建联系
在需要的地方进行使用

如果对redux基础不太清楚的可以看看之前的几篇文章：
Redux的基础用法详解（纯函数的概念）
在react项目实战中使用Redux（案例讲解）