前端开发React18 - Redux（前端开发和后端开发有什么区别）

Redux介绍：

Redux是React中使用广泛的集中状态管理工具 ，类比vuex之于vue 同类的工具还有mobx等

Redux数据流架构：

为了职责清晰，Redux代码被分为三个核心的概念，我们学redux，其实就是学这三个核心概念之间的配合，三个概念分别是:

1. state: 一个对象 存放着我们管理的数据
2. action: 一个对象 用来描述你想怎么改数据
3. reducer: 一个函数 根据action的描述更新state纯Redux实现计数器

核心步骤

1. 创建reducer函数 在内部定义好action和state的定义关系
2. 调用Redux的createStore方法传入定义好的reducer函数生成store实例
3. 通过store实例身上的subscribe方法监控数据是否变化
4. 点击按钮 通过专门的dispatch函数 提交action对象 实现数据更新

demo：

-

0

+

<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>

<script>

// 定义reducer函数，内部主要的工作是根据不同的action 返回不同的state

function counterReducer (state = { count: 0 }, action) {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 }

case 'DECREMENT':

return { count: state.count - 1 }

default:

return state

}

}

// 使用reducer函数生成store实例

const store = Redux.createStore(counterReducer)

// 订阅数据变化

store.subscribe(() => {

console.log(store.getState())

document.getElementById('count').innerText = store.getState().count

})

// 增

const inBtn = document.getElementById('increment')

inBtn.addEventListener('click', () => { store.dispatch({ type: 'INCREMENT' }) })

// 减

const dBtn = document.getElementById('decrement')

dBtn.addEventListener('click', () => { store.dispatch({ type: 'DECREMENT' }) })

</script>

Redux与React

1. 创建项目

yarn create vite react-redux --template react

npx create-react-app react-redux

2. 安装redux配套工具

yarn add @reduxjs/toolkit react-redux

npm i @reduxjs/toolkit react-redux

3. 启动项目

yarn dev

npm run start

目录结构设计

store > modules > a.js

b.js

> index.js

创建counterStore，使用toolkit的createSlice方法创建一个独立的子模块：

import { createSlice } from '@reduxjs/toolkit'

const counter = createSlice({

// 模块名称独一无二

name: 'counter',

// 初始数据

initialState: { count: 1 },

// 修改数据的同步方法

reducers: { add (state) { state.count++} }

})

const { add } = counter.actions

const counterReducer = counter.reducer

// 导出修改数据的函数

export { add }

// 导出reducer

export default counterReducer

使用configureStore语法组合子模块：

import { configureStore } from '@reduxjs/toolkit'

import counterReducer from './counterStore'

export default configureStore({

reducer: {

// 注册子模块

counter: counterReducer

}

})

为React提供Redux store：

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App'

// 导入store

import store from './store'

// 导入store提供组件Provider

import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(

// 提供store数据

)

组件使用store中的数据：

import { useSelector } from 'react-redux'

function App () {

// 使用数据

const { count } = useSelector(state => state.counter)

return (

)

}

export default App

组件修改store中的数据：

1. 使用counterStore模块中导出的add方法创建action对象
2. 通过dispatch函数以action作为参数传入完成数据更新

import { useSelector, useDispatch } from 'react-redux'

import { add } from './store/counterStore'

function App () {

// 使用数据

const { count } = useSelector(state => state.counter)

// 修改数据

const dispatch = useDispatch()

const clickHandler = () => {

// 1. 生成action对象

const action = add()

// 2. 提交action进行数据更新

dispatch(action)

}

return (

)

}

export default App

组件修改数据并传参：

import { createSlice } from "@reduxjs/toolkit"

const counterStore = createSlice({

name: 'counter', // 独一无二不重复的名字语义化

// 定义初始化的数据

initialState: {

taskList: ['react']

},

reducers: {

// action为一个对象 对象中有一个固定的属性叫做payload 为传递过来的参数

addTaskList (state, action) {

state.taskList.push(action.payload)

}

}

})

// 生成修改数据的方法导出

const { addTaskList } = counterStore.actions

export { addTaskList }

// 生成reducer 导出 供index.js做组合模块

const counterReducer = counterStore.reducer

export default counterReducer

Redux异步处理：

import { createSlice } from '@reduxjs/toolkit'

import axios from 'axios'

const channelStore = createSlice({

name: 'channel',

initialState: {

channelList: []

},

reducers: {

setChannelList (state, action) {

state.channelList = action.payload

}

}

})

// 创建异步

const { setChannelList } = channelStore.actions

const url = ''

// 封装一个函数 在函数中return一个新函数 在新函数中封装异步

// 得到数据之后通过dispatch函数 触发修改

const fetchChannelList = () => {

return async (dispatch) => {

const res = await axios.get(url)

dispatch(setChannelList(res.data.data.channels))

}

}

export { fetchChannelList }

const channelReducer = channelStore.reducer

export default channelReducer

组件使用：

import { useEffect } from 'react'

import { useSelector, useDispatch } from 'react-redux'

import { fetchChannelList } from './store/channelStore'

function App () {

// 使用数据

const { channelList } = useSelector(state => state.channel)

useEffect(() => {

dispatch(fetchChannelList())

}, [dispatch])

return (

)

}

export default App