Integrate and use Redux in the original react project (summary of usage steps)

foreword

A react project written before, you need to use Redux in it, and record the implementation steps

Install Redux

To be used in the project, so let's install redux and react-redux first

cnpm i -D redux react-r

Here is to use redux to complete some functions of the menu in this project. The functions related to the new file listed below are described in the previous article, and will not be described here.

Create new files related to using Redux

Create a new store folder in the src directory to use as a warehouse,
and create a new file under store:

1. Create a new content.js to define a name

export const SWITCH_MENU = 'SWITCH_MENU'

2. Create a new index.js inside:

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

const store = createStore(reducer)

export default store

3. New action.js

import {
    
     SWITCH_MENU } from './contants'

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

4. Create a new reducer.js to establish a connection

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

Use Redux globally

If you want to use it globally, you need to use the Provider component for a package
. Go to the index.js file in the root directory src:
first introduce the Provider and the store you need to use

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

Then use Provider to wrap it and pass the store in:

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

Use it on the navigation page to complete the function

Go to the index.js file in the nav folder and
introduce connect and switchMenuAction

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

Call connect at the bottom, and then pass in the Index (Index is the component name used here):

export default connect()(Index)

Define a switchMenu function:
call dispatch to define switchMenuAction and pass in menuName, because we finally display it through menuName

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

Then define the click event directly in the rendered menu.item, so that the menu can be switched:

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

At last

Well, this article is over, mainly about how to integrate and use redux in existing projects. Roughly summed up in the following steps:

1. Guide package to install redux
2. Create a new warehouse-related file and define it to create a link
3. use where needed

If you are not sure about the basics of redux, you can read the previous articles:
Detailed explanation of the basic usage of Redux (the concept of pure function)
Using Redux in the actual combat of the react project (case explanation)